How to make text uppercase

Short answer

text-transform: uppercase shows the text in capital letters without changing it in the HTML:

<p style="text-transform: uppercase;">Summer sale</p>
<p style="text-transform: lowercase;">QUIET TEXT</p>
<p style="text-transform: capitalize;">every word gets a capital</p>

Why CSS

Letter case is part of the styling. If the design changes tomorrow, you fix one rule instead of retyping text across the site. Also, text typed in CAPS LOCK in the HTML is sometimes spelled out by screen readers as an abbreviation.

Uppercase with spacing

Capital letters sit close together, so they are often spaced out and made a bit smaller:

<span style="text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; font-weight: 600; color: gray;">New arrivals</span>

Small caps

font-variant: small-caps gives small caps — capital letters the height of lowercase ones. Good for subheadings and abbreviations in running text.

Common mistake

capitalize capitalizes the first letter of every word, not just the first one: "every word" becomes "Every Word". To capitalize only the first letter of a sentence, use ::first-letter with text-transform: uppercase.