CSS Text
In this page:
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.
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.
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.
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.
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.
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>- 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.
- 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.
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: