CSS font

The font property in CSS allows you to set the style, size, weight, variant, and style of the font used in text elements on a webpage. You can specify multiple properties in a single font declaration.

Here is the syntax for the font property:


selector {
  font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
}

Let's break down each part of the font property:

[font-style]: Can be normal, italic, or oblique.
[font-variant]: Can be normal or small-caps.
[font-weight]: Can be a numeric value ranging from 100 to 900, or normal or bold.
[font-size]: Specifies the font size, can be in pixels, ems, rems, etc.
[line-height]: Specifies the line height, can be in pixels, ems, rems, etc.
[font-family]: Specifies the font family to be used, can be a specific font or a generic font family.

Now, let's see an example of the font property in action.

Result:

This is an example text with different font properties applied.

In the example above, the font property is set to italic normal 400 20px/1.5 Arial, sans-serif. This means the text will be italicized, normal font variant, normal font weight (equal to 400), font size of 20 pixels, line height of 1.5, and the font family will be Arial or a generic sans-serif font.