text-transform

text-transform changes how characters are rendered. It leaves the DOM’s underlying text in place, while language-specific mapping and browser behavior determine the visible result.

Compare uppercase with capitalize

Capitalize changes the first eligible character of each word but leaves the remaining characters unchanged. It does not lowercase the existing CSS acronym or implement editorial title-case rules.

<p>learn CSS through examples</p>
<p class="upper">learn CSS through examples</p>
<p class="capital">learn CSS through examples</p>

.upper {
  text-transform: uppercase;
}
.capital {
  text-transform: capitalize;
}

Use case styling for a short label

The source keeps natural casing. A short category label uses uppercase presentation, while the longer explanation stays normally cased.

<section>
  <p class="category">CSS layout</p>
  <h2>Start with a small grid</h2>
  <p>Change one column size, then explain where the available space went.</p>
</section>

.category {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  font-weight: 700;
}
p {
  line-height: 1.6;
}

Values and defaults

The initial value is none and the property is inherited. Uppercase and lowercase use case mappings; capitalize changes initial characters without changing the rest. Full-width, full-size-kana, and math-auto serve specific writing-system or math needs and have separate support histories.

Language metadata matters. For example, Turkish casing distinguishes dotted and dotless i. Browser support for particular language rules can differ even when the basic property is supported.

Common mistakes

Capitalize is not a title-case editor and cannot fix deliberately incorrect source casing. It also may be inappropriate for a language whose titles do not capitalize every word. CSS case transformation does not guarantee any particular assistive-technology pronunciation or copied-text behavior; test the actual combination.

Avoid long all-uppercase passages. Use meaningful headings, natural source text, and correct language metadata. Learn font-variant when small-cap glyphs are the intended result.

Sources and browser support

MDN: text-transform describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.