CSS Tutorial
CSS Text
CSS gives you many properties to style text: its color, alignment, decoration, capitalization and spacing. Good text styling makes content clear and pleasant to read.
Text color and alignment
The color property sets the text color, and text-align controls horizontal alignment: left, right, center or justify. These are two of the most-used text properties.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #2b5cff;
text-align: center;
}
p {
color: #444;
text-align: justify;
}
</style>
</head>
<body>
<h1>Centered Heading</h1>
<p>This paragraph is justified, so both edges line up evenly. Justified text spreads words to fill each line.</p>
</body>
</html>Text decoration and transform
The text-decoration property adds or removes lines such as underline, overline and line-through. A very common use is removing the underline from links with text-decoration: none. The text-transform property changes capitalization to uppercase, lowercase or capitalize.
<!DOCTYPE html>
<html>
<head>
<style>
.under { text-decoration: underline; }
.strike { text-decoration: line-through; }
.caps { text-transform: uppercase; }
.title { text-transform: capitalize; }
</style>
</head>
<body>
<p class="under">Underlined text</p>
<p class="strike">Struck-through text</p>
<p class="caps">this becomes uppercase</p>
<p class="title">this becomes title case</p>
</body>
</html>Spacing: line-height and letter-spacing
The line-height property sets the vertical space between lines, and it hugely affects readability. The letter-spacing property adjusts the gap between characters. Comfortable line spacing (around 1.5) makes paragraphs much easier to read.
<!DOCTYPE html>
<html>
<head>
<style>
.cramped {
line-height: 1;
color: #888;
}
.comfy {
line-height: 1.8;
letter-spacing: 0.5px;
color: #222;
}
</style>
</head>
<body>
<p class="cramped">Cramped text: the lines are packed tightly together, which makes longer paragraphs harder to read over time.</p>
<p class="comfy">Comfortable text: extra line height and letter spacing give the words room to breathe and improve readability.</p>
</body>
</html>Text properties reference
| Property | Purpose | Example value |
|---|---|---|
| color | Text color | #444 |
| text-align | Horizontal alignment | center, justify |
| text-decoration | Underline, line-through, none | underline |
| text-transform | Capitalization | uppercase, capitalize |
| line-height | Space between lines | 1.5 |
| letter-spacing | Space between letters | 0.5px |
A line-height of about 1.5 to 1.8 is comfortable for body text. Very tight or very loose spacing tires the reader.
Key points
- color sets text color; text-align sets alignment.
- text-decoration adds or removes underlines.
- text-transform changes letter case.
- line-height controls spacing between lines.
- Generous line spacing greatly improves readability.