CSS · Chapter 12 of 44

CSS Text

Text properties control alignment, decoration, transformation, spacing, and more. Common ones include text-align, text-decoration, text-transform, and letter-spacing.

These properties let you fine-tune the readability and style of written content on a page.

Syntax

text-align: center;
text-decoration: underline;

Alignment and decoration

text-align sets left/right/center/justify. text-decoration adds or removes underline, overline, or line-through.

Transform and spacing

text-transform can convert text to uppercase, lowercase, or capitalize. letter-spacing and line-height adjust character and line spacing.

Example 1 (css)

h2 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
}

Output

A CENTERED, UPPERCASE HEADING WITH SPACED LETTERS

Three text properties combine to transform the heading's look.

Key points

text-align controls horizontal alignment.
text-decoration adds underline/overline/line-through.
text-transform changes letter casing without editing the HTML.
letter-spacing and line-height fine-tune readability.

💡 Note: Removing default link underlines is done with text-decoration: none.

CSS Text

Alignment and decoration

Transform and spacing

Key points

📝 Quick Quiz