CSS Text
CSS gives you a dozen properties for tuning text: colour, alignment, decoration, spacing, transformation. Most of them are intuitive once you know the name.
Common text properties
| Property | Purpose | Example |
|---|---|---|
color | Text colour. | #333 |
text-align | Horizontal alignment. | left, center, right, justify |
text-decoration | Underline, line-through, none. | underline dotted |
text-transform | Force case. | uppercase, capitalize |
letter-spacing | Space between letters. | 0.05em |
word-spacing | Space between words. | 4px |
line-height | Vertical rhythm. Unitless multiplier is ideal. | 1.5 |
text-indent | First-line indent in a paragraph. | 2em |
white-space | How whitespace and line breaks are handled. | nowrap, pre |
A tiny demo of alignment
Tip: Use a unitless
line-height (e.g. 1.5). It scales with the element's font-size; line-height: 24px does not.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Text</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Remove the underline from this link.
a { text-decoration:
; }
A single keyword meaning "no decoration at all".
Discussion
Loading…