Skip to main content

CSS Font and Text Properties

CSS, or Cascading Style Sheets, is a powerful tool that gives us control over the look and feel of our web pages. One of the key areas it allows us to manipulate is text. In this tutorial, we will be exploring some of the most commonly used CSS font and text properties that allow us to style our text exactly how we want it.

CSS Font Properties​

Font-Family​

The font-family property is used to specify the typeface that will be used for a certain element. You can specify multiple font families as a "fallback" system. If the browser does not support the first font, it tries the next font.

body {
  font-family: Arial, sans-serif;
}

Font-Size​

The font-size property sets the size of the font. This can be defined in various units, such as pixels (px), ems (em), rems (rem), or percentage (%).

p {
  font-size: 20px;
}

Font-Weight​

The font-weight property sets the weight or thickness of the font. Common values include normal, bold, bolder, lighter, and numbers 100 to 900.

h1 {
  font-weight: bold;
}

Font-Style​

The font-style property is used to make a font italic or oblique.

em {
  font-style: italic;
}

CSS Text Properties​

Color​

The color property is used to specify the color of the text.

p {
  color: blue;
}

Text-Align​

The text-align property is used to align the text in an element. The possible values are left, right, center, and justify.

p {
  text-align: center;
}

Text-Decoration​

The text-decoration property is used to add decoration to text. It could be underline, overline, line-through, or none.

a {
  text-decoration: none;
}

Text-Transform​

The text-transform property is used to change the text to uppercase, lowercase, or capitalize (first letter of each word is capitalized).

p {
  text-transform: uppercase;
}

Line-Height​

The line-height property is used to specify the space between lines. It can take various units or can be unitless.

p {
  line-height: 1.6;
}

Letter-Spacing and Word-Spacing​

The letter-spacing and word-spacing properties are used to specify extra space between letters or words.

p {
  letter-spacing: 2px;
  word-spacing: 1em;
}

By understanding these basic CSS font and text properties, you can start to style your text and make your web pages look exactly how you want them to look. Practice using these properties and experiment with different values to see how they affect your text. Happy coding!