The CSS font property is used to control the appearance of text. With this property, you can modify various aspects of text, including its size, color, style, and more. You’ve already learned how to make text bold or underlined. Here, you’ll also discover how to resize your font using percentages.

Here are some key font attributes:

• Font color: This property changes the color of the text. (This is a standalone attribute.)

• Font family: This property changes the typeface of the font.

• Font size: This property adjusts the size of the font, which can be specified in various units including percentages.

• Font size: This property adjusts the size of the font, which can be specified in various units including percentages.

• Font style: This property allows you to make the font bold, italic, or oblique.

• Font variant: This property enables a small-caps effect for the text.

• Font weight: This property controls the thickness or lightness of the font, affecting its boldness.

1. font-style

Description: Defines the style of the font.

Values:

• normal: Default font style.

• italic: Italic text

• oblique: Oblique text (similar to italic but less slanted).

Example: small-caps

2. font-variant

Description: Specifies the variant of the font.

Values:

• normal: Default font variant.

• small-caps: Transforms text to small capital letters.

Example: small-caps

3. font-weight

Description: Sets the thickness of the font.

Values:

• normal: Default font weight.

• bold: Bold text.

• bolder: Bolder than the parent element.

• lighter: Lighter than the parent element.

• Numeric values: 100, 200, 300, 400, 500, 600, 700, 800, 900 (where 400 is normal and 700 is bold).

Example: bold, 700

4. font-size

Description: Defines the size of the font.

Values:

• Absolute units: px, pt, cm, mm, in

• Relative units: em, rem, %

• initial: Default value of the property.

Example: 16px, 1.5em, 120%

5. line-height

Description: Sets the space between lines of text.

Values:

• normal: Default line height.

• number: A unitless number that multiplies the font size.

• length: Absolute length (e.g., px, em).

• percentage: Percentage of the font size.

Example: 1.5, 20px, 150%

6. font-family

Description: Defines the typeface for the text.

Values:

• Font names: 'Arial', 'Times New Roman'

• Generic family names: serif, sans-serif, monospace, cursive, fantasy

Example: 'Arial', sans-serif

Example:

Output: