CSS Text Formatting

Beginner ~7 min read

Text Alignment

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

HTML

CSS

<p class='left'>Left aligned text (default)</p>
<p class='center'>Center aligned text</p>
<p class='right'>Right aligned text</p>
<p class='justify'>Justified text spreads content evenly from left to right edges. This is useful for newspaper-style layouts.</p>

Text Decoration

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

HTML

CSS

<p class='underline'>Underlined text</p>
<p class='overline'>Overlined text</p>
<p class='line-through'>Strikethrough text</p>
<a href='#' class='no-underline'>Link with no underline</a>

Text Transform

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

HTML

CSS

<p class='uppercase'>uppercase text</p>
<p class='lowercase'>LOWERCASE TEXT</p>
<p class='capitalize'>capitalize each word</p>
<p class='none'>Normal Text</p>

Letter & Word Spacing

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

HTML

CSS

<p class='tight'>Tight letter spacing</p>
<p class='normal'>Normal spacing</p>
<p class='loose'>Loose letter spacing</p>
<p class='word-space'>Increased word spacing example</p>

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?

text-decoration: none

text-transform: none

text-align: none

text-style: none

Previous Text Styling

Next Google Fonts

Text Alignment

Text Decoration

Text Transform

Letter & Word Spacing

Summary

Quick Quiz

Enjoying these tutorials?