The CSS text-transform property
The CSS text-transform property changes the capitalization of text for display only. uppercase makes every letter a capital, lowercase makes them all small, and capitalize capitalizes the first letter of each word. The underlying HTML text is unchanged — it just looks different on screen.
Overview
text-transform changes how text is capitalized on screen without touching the actual characters in your HTML. Write "Sign in" in the markup, set text-transform: uppercase, and it displays as "SIGN IN" while the real text — the bit that gets copied, searched and read aloud — stays as you wrote it.
That separation is the whole point. It keeps your content clean and editable while letting the design decide the casing, which is perfect for buttons, labels and small headings that a brand wants in all caps. The three workhorses are uppercase, lowercase and capitalize (first letter of each word), plus none to leave things as typed.
capitalize has a known limitation worth flagging: it capitalizes the first letter of every word, so it will happily turn "the cat sat" into "The Cat Sat" — including words that titles normally leave lowercase. For proper title case you still need to write the text correctly yourself; CSS only does the mechanical version.
Syntax
selector {
text-transform: uppercase;
}Values
The text-transform property accepts the values below. Every property also accepts the CSS-wide keywords inherit, initial, revert and unset.
| Value | Description |
|---|---|
none |
Leaves the text exactly as written. The default. |
uppercase |
Displays every letter as a capital. |
lowercase |
Displays every letter in lowercase. |
capitalize |
Capitalizes the first letter of each word. |
Example
<style>
p { margin: 0 0 6px; font: 600 16px system-ui, sans-serif; }
.up { text-transform: uppercase; letter-spacing: 0.05em; }
.low { text-transform: lowercase; }
.cap { text-transform: capitalize; }
</style>
<p class="up">uppercase label</p>
<p class="low">LOWERCASE Again</p>
<p class="cap">capitalize each word</p>Best practices
- Use
text-transform: uppercasefor styling so the real text stays normal-cased and easy to read, copy and translate. - Add a little positive letter-spacing to all-caps text — capitals set tightly are harder to read.
- Do not lean on
capitalizefor true title case; it capitalizes every word, including the small ones a real title would not. - Keep long passages out of all caps — uppercase is fine for short labels but tiring to read in bulk.
Accessibility
Because text-transform only changes the display, screen readers generally read the original, normally-cased text — which is good, since it avoids letters being spelled out one by one. That is another reason to style casing in CSS rather than typing words in all caps in the HTML, where a screen reader might misread an all-caps word as an initialism.
Visually, large amounts of uppercase text are harder to read because every word forms the same rectangular shape, removing the ascenders and descenders the eye uses to recognize words. Reserve all caps for short labels, and give them a touch of letter-spacing to keep them legible.
Frequently asked questions
How do I make text uppercase in CSS?
text-transform: uppercase. The text displays in capitals while the underlying HTML stays as written, so it remains easy to copy and read.