Styling Text
Beyond fonts, CSS controls how text is aligned, decorated, transformed and spaced, how it wraps, and what happens when it doesn't fit. These properties polish headings, links, labels and long-form reading.
Alignment
Prefer start and end over left and right so alignment flips automatically for right-to-left languages.
Decoration
text-decoration is a shorthand for line, style, colour and thickness. text-underline-offset moves the underline away from descenders — a simple way to make link underlines more elegant.
Transform and spacing
Write the actual text in normal case and use text-transform for display — screen readers may spell out all-caps text letter by letter if it's typed that way. Uppercase labels look better with a little extra letter-spacing.
Indentation and white space
white-space | Collapses spaces? | Keeps line breaks? | Wraps? |
|---|---|---|---|
normal | Yes | No | Yes |
nowrap | Yes | No | No |
pre | No | Yes | No |
pre-wrap | No | Yes | Yes |
pre-line | Yes | Yes | Yes |
Better line breaks: text-wrap
text-wrap: balance evens out the line lengths of short blocks like headings and captions. text-wrap: pretty improves paragraph endings by avoiding orphaned words.
Vertical alignment of inline content
vertical-align applies to inline and table-cell elements — not blocks. To centre blocks vertically, use flexbox or grid (lesson 31).