CSS Text

Written by RedoHub Team · Last updated: July 31, 2026

CSS provides multiple properties that specify how text should be formatted on a web page. You can control the color, alignment, spacing, and decoration to make your content readable and professional.

Text Color

The color property defines the color of the text. Values can be color names (e.g., 'red'), HEX codes, RGB, or HSL values.

body {
    color: #333; /* Dark Gray text */
}

h1 {
    color: #2e7d52; /* Success green */
}

Text Alignment

The text-align property is used to set the horizontal alignment of text.

Centered Text Content

Right-aligned Text Content

Justified text: The justify value makes every line of text the same width, similar to what you see in newspapers or magazines. Both the left and right margins will be straight.

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

Text Decoration

The text-decoration property is used to set or remove decorations from text (mainly underscores).

This text has a wavy underline decoration.

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

h2 {
    text-decoration: underline;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in text.

this text was written in lowercase.

p {
    text-transform: uppercase;      /* THIS IS UPPERCASE */
    text-transform: lowercase;      /* this is lowercase */
    text-transform: capitalize;     /* Each Word Starts with a Capital Letter */
}

Text Spacing

Control the space between letters, words, and lines of text using these properties:

Wide text spacing with high line height.

p {
    letter-spacing: 2px; /* Space between letters */
    word-spacing: 5px;   /* Space between words */
    line-height: 1.6;    /* Vertical space between lines */
}

Text Shadow

The text-shadow property adds a shadow to text. Values represent: horizontal, vertical, blur radius, and color.

CSS Text Shadow Illustration

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

Common Mistakes to Avoid

Assuming text-transform changes the real content. text-transform: uppercase is purely visual — copying the text or reading it via JavaScript still returns the original lowercase/mixed-case string.

Overusing text-shadow on body text. A subtle shadow on a large heading can look great; the same shadow on a paragraph of body text just makes it harder to read. Reserve it for large, sparse text.

Setting line-height too tight. A line-height around 1 or 1.1 crams lines together and hurts readability, especially for longer paragraphs on mobile screens. 1.5–1.8 is a comfortable range for body text.

Try It: A Styled Blockquote

Combining several text properties from above — alignment, letter-spacing, and a colored border — into one real component:

blockquote {
    font-style: italic;
    letter-spacing: 0.5px;
    line-height: 1.6;
    border-left: 4px solid #2e7d52;
    padding-left: 16px;
    color: #444;
}

Rendered result:

"Good typography is invisible — readers only notice it when it's done badly."

Frequently Asked Questions

Q: What's a readable line-height for body text?

A: Somewhere around 1.5–1.8 works well for most paragraph text — tighter for headings, looser for long-form reading.

Q: Does text-transform change the actual text content?

A: No — it's a display-only style. The underlying text (what gets copied, searched, or read by a screen reader) stays exactly as written in the HTML.

Q: Can I combine multiple text-decoration values, like underline and line-through?

A: Yes — text-decoration-line: underline line-through; applies both at once. See the MDN text-decoration reference for the full shorthand syntax.

« Previous Lesson Next Lesson »