Как сделать текст заглавными буквами

Короткий ответ

text-transform: uppercase показывает текст заглавными буквами, не меняя его в 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>

Почему через CSS

Регистр — это часть оформления. Если завтра дизайн сменится, достаточно поправить одно правило, а не переписывать текст по всему сайту. Кроме того, текст из CAPS LOCK в HTML экранные дикторы иногда читают по буквам, как аббревиатуру.

Заглавные с разрядкой

Заглавные буквы стоят плотно, поэтому их часто немного разряжают и уменьшают:

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

Капитель

font-variant: small-caps даёт капитель — заглавные буквы высотой со строчные. Подходит для подзаголовков и аббревиатур в тексте.

Частая ошибка

capitalize делает заглавной первую букву каждого слова, а не только первого: «every word gets a capital» станет «Every Word Gets A Capital». Чтобы поднять только первую букву предложения, используйте ::first-letter с text-transform: uppercase.