Font Styling 2/2

Now that we have gone over some of the basic font-styling properties in CSS, there are some still left over, which we will go over now as they provide some precise styling to text and may be needed in some situations.

font-variant

The font-variant property in CSS allows you to specify whether the text should be displayed in a small-caps variant or the normal font variant. The syntax for the font-variant property is:

small-caps text uses capital letters slightly smaller than the normal capital letters and is often used for headings or subheadings.

Here's an example of how you might use the font-variant property to display text in a small-caps variant:

line-height

The line-height property in CSS allows you to specify the distance between lines of text. The syntax for the line-height property is:

You can specify the line-height using CSS length units (such as pixels, ems, or percentages). For example, to set the line-height for a paragraph element to 1.5 times the font-size, you would use the following code:

font

The font property in CSS is a shorthand property that allows you to specify several font-related properties in a single declaration. The syntax for the font property is:

The font-style, font-variant, font-weight, font-size, and line-height properties are optional and can be left out if the default values are desired. The font-family property is required.

Here's an example of how you might use the font property to specify the font for a paragraph element:

This would set the font-style to italic, the font-variant to small-caps, the font-weight to bold, the font-size to 16 pixels, the line-height to 1.5, and the font-family to Arial as a first choice and sans-serif as a fallback.