text-transform
Changes the case of letters on display.
Syntax
text-transform: value;Values
| Parameter | Type | Description |
|---|---|---|
| uppercase | keyword | ALL CAPITALS. |
| lowercase | keyword | all lowercase. |
| capitalize | keyword | The First Letter Of Each Word. |
| none | keyword | As written in the HTML. |
Examples
Three transformations:
<p style="text-transform: uppercase;">uppercase letters</p>
<p style="text-transform: lowercase;">LOWERCASE LETTERS</p>
<p style="text-transform: capitalize;">every word capitalized</p>Notes
The text in the HTML stays unchanged: it is copied and read by screen readers as written. So write headings normally and make them capitals with CSS.
See also
- letter-spacing — Extra space between letters.
- font-weight — The weight (boldness) of the font.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.