Alignment

Text-based content (e.g., newspapers or blogs), may align its text in certain ways to make it more readable and user-friendly.

In CSS, we can horizontally align our text the same way with the text-align property!

Three common ways to align text are: to the left (this is the default), in the center, or to the right:

#left-align {
 text-align: left;
}
 
#center-align {
 text-align: center;
}
 
#right-align {
 text-align: right;
}

This is what the rendered result looks like:

Examples of text alignment: left, center, and right.


Decoration

In the image from the last section, did you notice how the text at the top was underlined? How did that happen?!

Another well-known property for text-formatting is the text-decoration property!

For example, to underline the text “I love CSS!” in a <p> paragraph element:

p {
  text-decoration: underline;
}

The rendered result would look something like this:

Underlined text that reads 'I Love CSS!'