CSS Font Style

CSS provides several properties to control the style of fonts, including font family, font size, font weight, font style, line height, text decoration, and text transform. Here’s an overview of the font style properties:

1. font-family: This property sets the font family to be used for the text. You can specify multiple font families as a fallback in case the preferred font is not available on the user’s system.
2. font-size: This property sets the size of the text. You can specify the size in pixels, ems, rems, or other units.
3. font-weight: This property sets the weight of the text, such as normal, bold, or lighter.
4. font-style: This property sets the style of the text, such as normal, italic, or oblique.
5. line-height: This property sets the height of a line of text. You can specify the line height as a number or a percentage of the font size.
6. text-decoration: This property sets the decoration of the text, such as underline, overline, or line-through.
7. text-transform: This property sets the case of the text, such as uppercase, lowercase, or capitalize.

Here’s an example of how to use some of these properties to style text:

h1 {
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  font-style: italic;
  line-height: 1.2;
  text-decoration: underline;
  text-transform: uppercase;
}

In this example, the font family is set to Arial with a fallback to a generic sans-serif font, the font size is set to 32 pixels, the font weight is set to bold, the font style is set to italic, the line height is set to 1.2 (which means the line height is 120% of the font size), the text is underlined, and the text is uppercase.