CSS 101 - Font and text

#css #beginners #tutorial

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.

Text

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:

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:

h1 {
    color: red;
    color: #ff0000;
    color: rgb(255,0,0);
}

The font-size can be represent in different measurement unit:

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:

a {
  text-decoration: none;
}

We can also transform the text:

h1 {
  text-transform: uppercase;
  text-transform: lowercase;
  text-transform: capitalize;
}

Font

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.

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