CSS 101 - Font and text
Tags: css, beginners, tutorial
Published: 2021-03-16 12:52:12

---
title: CSS 101 - Font and text
published: true
description: 
tags: CSS, beginner, tutorial
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--SfWzjSi6--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/y0qmpmhtnw1db8s4jxx9.jpg
series: CSS 101
---

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing. 

<h2>Text</h2>
In CSS we can change many properties related to the text. It good to know that by default the text properties are inherits from the body.

Here is a example of the most used text properties:
```css
h1 {
    color: red;
    background-color: lightsgray;
    font-size: 24px;
    font-weight: bold; /* normal, bold, 100-900 */
    font-style: italic; /* normal, italic */
    line-height: 30px; 
    letter-spacing: 6px; 
    text-align: center; /* center, left, right, justify */
}
```

The color property is used to set the color of the text. The color is specified by:
```css
h1 {
    color: red;
    color: #ff0000;
    color: rgb(255,0,0);
}
```
The font-size can be represent in different measurement unit:
```css
h1 {
    font-size: 24px;
    font-size: 2em;  /* 1em is equal to the current element font size */
    font-size: 2rem;  /* 1rem is equal to the page font size */
    font-size: 110%; /* relative to container font-size */
}
```

If we want to remove the default text underline of a href:
```css
a {
  text-decoration: none;
}
```

We can also transform the text:
```css
h1 {
  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;
}
```
<h2>Font</h2>
In CSS there are five generic font families:

- Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance.
- Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
- Monospace fonts - here all the letters have the same fixed width. They create a mechanical look. 
- Cursive fonts imitate human handwriting.
- Fantasy fonts are decorative/playful fonts.

In CSS, we use the font-family property to specify the font of a text.

The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. Start with the font you want, and end with a generic family (to let the browser pick a similar font in the generic family, if no other fonts are available). The font names should be separated with comma.

```css
h1 {
  font-family: "Times New Roman", Times, serif;
  font-family: Arial, Helvetica, sans-serif;
  font-family: "Lucida Console", "Courier New", monospace;
}
```


<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>