How to Capitalize All Letters in CSS

Controlling letter case in web text is commonly handled with the CSS text-transform property, which lets you capitalize all letters without changing the underlying HTML content. This evergreen explainer details how to capitalize all letters using text-transform: uppercase, outlines which elements it affects, covers implementation patterns such as universal selectors and class-based scopes, and reviews browser compatibility and accessibility impacts. You will learn when this transformation is appropriate, how to avoid overuse, and how to test results across browsers.

text-transform: uppercase

The primary method to capitalize all letters in CSS is text-transform: uppercase. When applied to an element, this value converts all source characters to their uppercase equivalents according to Unicode case-mapping rules. It does not alter the DOM text; it only changes visual rendering. This makes it a low-risk, style-only solution for headings, labels, and interface snippets where full capitalization is required for design or readability.

Basic syntax

To capitalize all letters on an element, declare text-transform: uppercase in your CSS rule. For example:

p {
  text-transform: uppercase;
}

This will cause every paragraph’s text to appear in uppercase in the rendered layout while preserving the original characters in the source.

Common values

• none: Preserves the source case.
• uppercase: Displays text in all capital letters.
• lowercase: Displays text in all lowercase letters.
• capitalize: Capitalizes the first letter of each word.

Scope and specificity

You can apply text-transform: uppercase globally, to a container, or to particular components. Using a universal selector affects all matching text on the page, so consider scope carefully to avoid unintended transformations. Combining classes with higher specificity allows targeted control.

Targeted implementation examples

• Global: body { text-transform: uppercase; }
• Component-level: .card-title { text-transform: uppercase; }
• Element type: h1, h2, h3 { text-transform: uppercase; }

Accessibility and legibility

Fully capitalized text can reduce readability because it eliminates ascender and descender shape cues. Use appropriate letter spacing (tracking), avoid long blocks of uppercase text, and reserve full capitalization for short strings such as headings or labels. Ensure sufficient color contrast and test with screen readers to confirm meaning is preserved.

Browser support and rendering

text-transform: uppercase is widely supported across modern browsers. Its behavior is consistent in current and evergreen browsers, though fine-tuning may be needed for legacy systems. The transformation is applied during rendering and does not change the stored text, which remains useful for searching, copying, and assistive technologies.

Supported browsers

When not to capitalize

Avoid applying full capitalization to body copy, paragraphs, or any lengthy content blocks. Overuse can impair scannability, slow reading speed, and create a perception of shouting. Reserve uppercase for concise interface elements, headings, and design accents where emphasis is intended.

Testing and validation

Verify your implementation by rendering the page in multiple browsers, inspecting computed styles, and reviewing accessibility with automated and manual checks. Confirm that text remains selectable and copy-paste operations return the original case. Combine text-transform with spacing and font choices to optimize legibility at various sizes.

Related techniques

Complement case control with CSS properties such as letter-spacing and font-variant to refine readability. For semantic markup, consider keeping source text in lowercase and applying text-transform: uppercase in the stylesheet only when presentation demands it.