CSS Text
Most of what visitors actually read on a page is plain text, which makes text styling one of the highest-impact things CSS can do. A handful of well-chosen text properties can turn a wall of words into something genuinely comfortable to read.
CSS gives you control over color, alignment, decoration (like underlines), casing (uppercase or capitalized), the space before the first line of a paragraph, the space between letters and words, the space between lines, and how whitespace itself is handled.
Small, careful text styling choices are a big part of what makes long-form content on a site like cookiescursor.com pleasant to read instead of exhausting.
In this page:
Syntax
selector {
color: color;
text-align: left | center | right | justify;
text-decoration: none | underline;
text-transform: uppercase | lowercase | capitalize;
}color and text-align
color sets the color of an element's text, and text-align controls its horizontal alignment within its container, like left, right, center, or justify.
Note:
- Left alignment is the most readable choice for long paragraphs in left-to-right languages, reserve center alignment for short headlines or callouts.
- Accepted values:
- left | right | center | justify — text-align (start | end also valid)
- color — any CSS color: name, hex, rgb(), hsl()
- currentcolor — the element's own text color
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
text-align: justify can create uneven, distracting spacing between words, especially in narrow columns.
Example: color and text-align
<style>
p {
color: navy;
text-align: center;
}
</style>
<p>Centered navy text</p>text-decoration and text-transform
text-decoration adds or removes lines like underline, overline, or line-through. text-transform changes the casing of text, like uppercase, lowercase, or capitalize, without changing the underlying HTML content.
Note:
- Use text-transform: uppercase for short labels like button text or section eyebrows, it reads best in small doses.
- Accepted values:
- none — no decoration (text-decoration)
- underline — a line below the text
- overline — a line above the text
- line-through — a line through the text
- uppercase | lowercase | capitalize | none — text-transform
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
Removing an underline from a link with text-decoration: none can make it harder for visitors to recognize it as clickable.
Example: text-decoration and text-transform
<style>
a {
text-decoration: underline;
}
.label {
text-transform: uppercase;
}
</style>
<a href="#">Underlined link</a>
<span class="label">short label</span>text-indent
text-indent adds space before the first line of a block of text, a classic pattern from print typography still occasionally used on the web for stylistic effect.
Note:
- text-indent works well for a single, deliberate stylistic touch, like the opening paragraph of a long-form article.
- Accepted values:
- length — e.g. 2em or 24px
- percentage — relative to the containing block's width
- negative length — hanging indent
- each-line / hanging — optional keywords (limited support)
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
A large text-indent value on a narrow column can push the first line's text awkwardly close to the edge or off balance visually.
Example: text-indent
<style>
p {
text-indent: 40px;
}
</style>
<p>This first line is indented like a print paragraph.</p>letter-spacing and word-spacing
letter-spacing adjusts the space between individual characters, and word-spacing adjusts the space between whole words, both accepting positive values (more space) or negative values (tighter spacing).
Note:
- A small positive letter-spacing (like 0.05em) often improves the legibility of uppercase text, which can otherwise feel cramped.
- Accepted values:
- normal — the font's default spacing (initial value)
- length — e.g. 2px or 0.1em (letter-spacing may be negative)
- word-spacing — adds space between words
- letter-spacing — adds space between letters
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
Heavy negative letter-spacing can make text genuinely hard to read, use it sparingly and only on large display text.
Example: letter-spacing and word-spacing
<style>
h1 {
letter-spacing: 0.05em;
}
p {
word-spacing: 8px;
}
</style>
<h1>SPACED HEADING</h1>
<p>Words with extra space between them</p>line-height and white-space
line-height sets the vertical space a line of text occupies, directly affecting how readable a paragraph feels. white-space controls how the browser handles extra spaces, tabs, and line breaks in the source text.
Note:
- A line-height between 1.4 and 1.6 (unitless, meaning a multiple of the font size) is a comfortable, widely recommended range for body text.
- Accepted values:
- normal — browser default, around 1.2 (initial value)
- number — multiplies the font size, e.g. 1.5
- length — e.g. 24px
- percentage — relative to the font size
- white-space: normal | nowrap | pre | pre-wrap | pre-line | break-spaces
- inherit | initial | unset | revert — CSS-wide keywords accepted by every property
Warning:
white-space: nowrap prevents text from wrapping at all, which can cause it to overflow its container on narrow screens.
Example: line-height and white-space
<style>
p {
line-height: 1.5;
}
.nowrap {
white-space: nowrap;
}
</style>
<p>Comfortable line height for reading long paragraphs of text.</p>
<p class="nowrap">This text will never wrap to a new line</p>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Justifying body text (text-align: justify), which can create uneven, distracting gaps between words.
- Setting line-height as a unitless small number by mistake, cramming lines of text too close together.
- Removing underlines from links with text-decoration without adding any other visual cue that they're clickable.
Chapter Summary
- color, text-align, and text-decoration control a text's color, horizontal alignment, and lines like underline.
- text-transform changes casing, and text-indent adds space before a block's first line.
- letter-spacing, word-spacing, and line-height fine-tune the space within and between lines of text.
Browser Support
All standard CSS text properties covered here are supported by every modern browser.
🔒
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: