CSS text-transform Property

Definition and Usage

The text-transform property controls how text is capitalized for display. Common values are uppercase, lowercase, capitalize, and none.

It is a presentation change only—the HTML source stays as written. Use it for headings, buttons, and labels when you want consistent casing without editing every string.

CSS Syntax

Also defined: full-width, full-size-kana, and math-auto—use only when you need those specialized scripts or math behaviors.

Property Values

How to Use text-transform

Write natural casing in HTML, then transform for style when needed.

1. Keep readable sentence or title case in the markup.
2. Pick uppercase, lowercase, capitalize, or none.
3. Apply on the element that should change (or a parent, since it inherits).
4. Pair with letter-spacing when all-caps headings need breathing room.

Live Preview

Same source sentence. Change only text-transform.

CSS Examples

Each snippet focuses on text-transform. Use Try It Yourself for a live editor.

<style>
  p {
    text-transform: uppercase;
  }
</style>

<p>css text transform sample</p>

<style>
  p {
    text-transform: capitalize;
  }
</style>

<p>css text transform sample</p>

<style>
  p {
    text-transform: lowercase;
  }
</style>

<p>CSS Text Transform Sample</p>

Key Takeaways