AI Workshop: learn to build apps with AI →
CSS Visual Styling: How to Style Text with CSS Typography

Join the AI Workshop and learn to build real-world apps with AI. A hands-on, practical program to level up your skills.


Beyond fonts, CSS offers many properties to control text appearance and layout.

text-transform

Change the case of text:

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

text-decoration

Add decorations like underlines:

a {
  text-decoration: underline;
}

.fancy {
  text-decoration: underline dashed blue;
}

Values: underline, overline, line-through, none

You can also set style (solid, double, dotted, dashed, wavy) and color.

text-align

Control horizontal text alignment:

.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }

line-height

Set the vertical space between lines:

p {
  line-height: 1.6;
}

Using a unitless number (like 1.6) is recommended as it scales with font size.

letter-spacing and word-spacing

Adjust spacing between characters or words:

.spaced {
  letter-spacing: 2px;
  word-spacing: 4px;
}

text-shadow

Add shadows to text:

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

Values: x-offset y-offset blur-radius color

text-indent

Indent the first line of a paragraph:

p {
  text-indent: 2em;
}

white-space

Control how whitespace is handled:

.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
ValueWhitespaceLine Breaks
normalCollapsedAuto
nowrapCollapsedNone
prePreservedManual only
pre-wrapPreservedAuto + Manual

word-break and overflow-wrap

Control how words break:

.break-word {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

vertical-align

Align inline elements vertically:

img {
  vertical-align: middle;
}

Values: baseline, top, middle, bottom, sub, super

Lessons in this unit:

0: Introduction
1: How to Work with CSS Fonts
2: ▶︎ How to Style Text with CSS Typography
3: How to Use CSS Colors
4: How to Use CSS Backgrounds
5: How to Use CSS Filters
6: How to Use CSS Units
7: How to Use the CSS calc() Function
8: How to Use Google Fonts
9: RGB color codes