CSS Text Properties: In-Depth Guide

Text Alignment (text-align)

Controls the horizontal alignment of text within its container. Common values: left, right, center, justify.

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

This text is left aligned.

This text is center aligned.

This text is right aligned.

This text is justified. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam euismod, urna eu tincidunt consectetur, nisi nisl aliquam enim, nec dictum urna.

Text Decoration (text-decoration)

Adds lines to text: underline, overline, line-through, or none. Can combine multiple values.

.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
.underline-overline { text-decoration: underline overline; }

This text is underlined.

This text has an overline.

This text is struck through.

This text is underlined and overlined.

Text Transform (text-transform)

Controls capitalization: uppercase, lowercase, capitalize, or none.

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

this text is uppercase.

THIS TEXT IS LOWERCASE.

this text is capitalized.

Letter Spacing (letter-spacing)

Adjusts the space between characters. Useful for headings or stylistic effects.

.letter-spacing-wide { letter-spacing: 0.2em; }
.letter-spacing-tight { letter-spacing: -0.05em; }

Wider letter spacing

Tighter letter spacing

Word Spacing (word-spacing)

Adjusts the space between words. Can improve readability or create stylistic effects.

.word-spacing-wide { word-spacing: 1.5em; }
.word-spacing-tight { word-spacing: -0.3em; }

This has wide word spacing.

This has tight word spacing.

Line Height (line-height)

Controls the vertical space between lines of text. Use unitless values for best scalability.

.line-height-loose { line-height: 2; }
.line-height-tight { line-height: 1; }

This paragraph has loose line height.
Second line for demo.

This paragraph has tight line height.
Second line for demo.

Text Shadow (text-shadow)

Adds shadow to text for emphasis or stylistic effect. Syntax: text-shadow: offset-x offset-y blur color;

.text-shadow-basic { text-shadow: 2px 2px 4px #888; }
.text-shadow-color { text-shadow: 1px 1px 6px #3498db; }

This text has a basic shadow.

This text has a colored shadow.