Web Analytics

CSS Text Formatting

Beginner ~7 min read

Text Alignment

The text-align property controls horizontal alignment of text within its container.

HTML
CSS
JS

Text Decoration

Add or remove underlines, overlines, and line-throughs with text-decoration.

HTML
CSS
JS

Text Transform

Change text capitalization with text-transform without modifying the HTML.

HTML
CSS
JS

Letter & Word Spacing

Control spacing between letters with letter-spacing and between words with word-spacing.

HTML
CSS
JS
Pro Tip: Use text-transform: uppercase with letter-spacing: 1-2px for elegant headings.

Summary

  • text-align - Align text (left, center, right, justify)
  • text-decoration - Add/remove underlines and strikethroughs
  • text-transform - Change capitalization
  • letter-spacing - Space between letters
  • word-spacing - Space between words

Quick Quiz

Which property removes the underline from links?

A
text-decoration: none
B
text-transform: none
C
text-align: none
D
text-style: none