CSS Text Styling

Control text appearance with text-align, text-decoration, text-transform, letter-spacing, line-height, and more.

Overview

CSS gives you precise control over how text looks and behaves. Beyond color and font, a suite of text-specific properties lets you control alignment, decoration, transformation, spacing, and overflow. Key text properties: - `text-align` horizontal alignment: left, right, center, justify - `text-decoration` underline, overline, line-through (strikethrough), none - `text-transform` uppercase, lowercase, capitalize - `letter-spacing` space between individual characters - `word-spacing` space between words - `line-height` vertical spacing between lines (unitless values like 1.5 are preferred) - `text-indent` indents the first line of a paragraph - `white-space` controls wrapping (nowrap, pre, normal) - `text-overflow` handles overflowing text (ellipsis for "...") - `text-shadow` adds a shadow to text

Key Points

•text-align: center/left/right/justify controls horizontal text alignment
•text-decoration: none removes underlines from links
•text-transform: uppercase/lowercase/capitalize changes letter casing
•line-height: 1.5 (unitless) is the recommended way to set line spacing
•letter-spacing: 0.1em adds breathing room to headings and buttons
•text-overflow: ellipsis with overflow: hidden clips long text with "..."

Examples

Common text alignment and decoration

h1 {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;   /* spaced-out heading look */
}

a {
  text-decoration: none;    /* remove underline from links */
}

a:hover {
  text-decoration: underline;  /* show underline on hover */
}

del {
  text-decoration: line-through;
}

Line-height for readable body text

body {
  line-height: 1.6;   /* unitless: 1.6x the element's font-size */
}

/* Tighter line-height for headings */
h1, h2, h3 {
  line-height: 1.2;
}

Unitless line-height (like 1.5 or 1.6) is best it scales proportionally with the font-size.

Truncating overflowing text with ellipsis

.truncate {
  white-space: nowrap;       /* prevent wrapping */
  overflow: hidden;          /* hide overflow */
  text-overflow: ellipsis;   /* show "..." */
  max-width: 200px;          /* container must have a width */
}

All three properties are required together for ellipsis to work.

Common Mistakes

Using line-height: 24px instead of unitless px values do not scale with font-size changes
Forgetting that text-overflow: ellipsis needs overflow: hidden and white-space: nowrap
Using text-align: justify on short lines it creates awkward spacing

Note

For body text, aim for line-height between 1.5 and 1.7 and a line length (max-width) of 60–75 characters per line. These are the two biggest factors in text readability.

CSS Text Styling

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which CSS property removes the underline from an anchor (<a>) element?