CSS - Text

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–18 minutes

Text properties shape typography and readability. Learn the essentials for clear and consistent content styling.

Learning Objectives

• Control alignment, decoration, and transformations.
• Manage spacing and wrapping for readable text blocks.
• Use hyphenation and overflow handling.

Details & Examples

• text-align, text-decoration, text-transform
• letter-spacing, word-spacing, line-height
• hyphens, overflow-wrap, white-space

.title { text-transform: uppercase; letter-spacing: .05em; }
.note { text-decoration: underline wavy; }
.readable { line-height: 1.6; max-width: 65ch; }
.break-words { overflow-wrap: break-word; }

Try it

Common Pitfalls

• Setting line-height too small hurts readability.
• Overusing uppercase reduces scannability.

Checks for Understanding

1. What’s a good starting range for paragraph line-height?
2. How do you enable hyphenation?

Exercises

1. Style a body of text to be highly readable: limit width with ch units, set line-height, and adjust letter-spacing for headings.
2. Demonstrate hyphenation and overflow-wrap behavior with a long compound word.