Text Formatting

CSS is also responsible for formatting how text looks. If you've ever used a word processor, a lot of the options here should be familiar.

Size

The size of text can be set using the font-size rule.

Result:

Alignment

To set the text's alignment/justification, the text-align rule can be used

Result:

Font

To set the font that should be used for text, the font-family rule can be used.

Result:

If the font's name has a space in it, surround it with quotation marks

Result:

Warning

If the font specified isn't available on the user's system, it won't be used! Be sure to specify fonts that are sure to work, no matter what platform the user is using.

It is also recommended to use fallbacks in case the font fails to load!

Fallbacks

Sometimes the font you want to use isn't available on the user's system, or it fails to download. In these cases, fallbacks can be used.

Fallbacks work by supplying a list of fonts rather than just a single font.

To do this, set the value of font-family to a list of fonts separated by commas

Result:

Generic Fonts

If all of your fonts fail to load, generic fonts can be used to tell the browser what type of font to use.

name	description	example
`serif`	A serif font (a font with decorative lines)	Example
`sans-serif`	A sans-serif font (a font without decorative lines)	Example
`monospace`	A font where all characters have the same width	Example
`cursive`	A font that looks like script	Example
`system-ui`	The system's default ui font	Example

These should be placed at the end of your fallbacks to ensure that even if all of your fonts don't load, your text will be close enough to how you want it to look.

Styling

Italics, Bold

To italicize text, use the font-style rule

font-style: normal;
font-style: italic;

To make text bold, use the font-weight rule

font-weight: normal;
font-weight: bold;

Text Decoration

To underline or ~~strikethrough~~ text, you can use the text-decoration rule to add decorative lines to your text!

Like borders, you specify the color, style, and thickness of the line.

text-decoration-color: <color>;
text-decoration-style: <line-style>;
text-decoration-thickness: <length>;

Unlike borders, these typically have default values.

However you also need to specify which line appears.

text-decoration-line: <decoration-type>;

Here are the types of lines you can choose from:

none
underline
overline
line-through

To display multiple lines at once, place the line types next to eachother

Result:

Styles

Here are the styles you can use:

solid
double
dotted
dashed
wavy

Shorthand

You can also shorten all of these into the single text-decoration rule

Result: