CSS provides properties to control the font style and font size of text within HTML elements. These properties allow you to customize the appearance of text, making it visually appealing and aligned with your design. Let’s explore how to use CSS to style the font and size of text, including a shorthand notation.

Font Style

The font-style property is used to define the style of the font, such as italic or normal. Here’s an example:

p {
  font-style: italic;
}

The font-style property can have values like normal, italic, or oblique.

Font Size

The font-size property sets the size of the font used for text. It can have values in pixels (px), percentages (%), em units (em), or other length units. Here’s an example:

h1 {
  font-size: 16px;
}

Shorthand Font Property

CSS provides a shorthand notation for setting multiple font properties at once, including font style, font size, and font family. Here’s an example:

h2 {
  font: italic 20px Arial, sans-serif;
}

In the example above, the font style is set to italic, the font size is 20px, and the font family is set to Arial, with a fallback to sans-serif if Arial is not available.

Conclusion

CSS font style and font size properties allow you to customize the appearance of text within HTML elements. By using the font-style property to specify the style of the font, and the font-size property to set the size of the font, you can achieve the desired visual effects. Additionally, the shorthand font property enables you to set multiple font properties in a single declaration. Experiment with different font styles, sizes, and shorthand combinations to achieve the desired typography in your web pages.