Use the text-transform CSS property to change how text appears without editing the text in your HTML. Its main values are uppercase, lowercase, capitalize, and none.

Choose uppercase for labels or controls that should display every letter in capitals. Choose capitalize when each word should begin with a capital letter. The choice changes presentation only; it does not rewrite the underlying text.

How do you make text uppercase with CSS?

To make text uppercase with CSS, apply text-transform: uppercase to the target element:

.button-label { text-transform: uppercase; }

If the HTML contains Submit application, the browser displays SUBMIT APPLICATION. The rule affects letters in the rendered content, including text inside headings, links, buttons, and other elements.

You can apply the rule to a reusable class:

.all-caps {
text-transform: uppercase;
}

Then add that class to any element that needs the same treatment. This approach keeps the source text readable and avoids typing duplicate all-capital versions into your HTML.

What does text-transform: capitalize do?

The text-transform: capitalize value capitalizes the first letter of each word:

.title { text-transform: capitalize; }

The source text monthly design report appears as Monthly Design Report. Capitalize is different from uppercase: it does not convert an entire string to uppercase.

It also does not necessarily create perfect editorial title case. For example, a source value such as MONTHLY design report may display as MONTHLY Design Report, because the property targets word initials rather than first lowercasing the rest of the string. If your content requires a specific style for acronyms, short words, or mixed-case names, provide that casing in the source text or transform it with application logic.

How do lowercase, none, and inheritance work?

Use lowercase when every displayed letter should be small:

.email { text-transform: lowercase; }

For example, [email protected] displays as [email protected]. To remove a transformation from an element, use none:

.plain-text { text-transform: none; }

text-transform is inherited. A parent rule can therefore affect descendants even when those child elements have no text-transform declaration:

.card { text-transform: uppercase; }

Every text element inside .card can display in uppercase. Override that inherited value on a child by declaring another value:

.card .description { text-transform: none; }

The description then uses its normal source casing while other card content remains uppercase. If the override does not work, check whether another selector has greater specificity or whether a later rule wins in the cascade.

Does text-transform change the original text value?

No. CSS text transformation changes rendering, not the stored string. If the HTML contains Download report, the browser can display DOWNLOAD REPORT with text-transform: uppercase, but the text node still contains Download report.

This distinction matters for links, accessibility, scripts, and forms. JavaScript reading an element’s text still receives the original value, and a form submits the input’s actual value rather than its visually transformed version. An input styled with text-transform: uppercase may look like ABC123 while its value remains the characters the user entered.

Use CSS for visual consistency. Change the underlying string separately when the stored or submitted casing must also change.