text-transform (CSS property)

By Adam Roberts

Syntax

text-transform: { capitalize | lowercase | none | uppercase | inherit } ;

Description

This property controls if and how an element’s text content is capitalized.

Example

These style rules make
h1 headings use only uppercase letters, while the first
letter of each word in h2 headings will be
uppercased:

h1 {
  text-transform: uppercase;
}
h2 {
  text-transform: capitalize;
}

Value

capitalize

Transforms the first character in each word to uppercase; all other characters remain unaffected—they’re not transformed to lowercase, but will appear as written in the document

lowercase

Transforms all characters to lowercase

none

Produces no capitalization effect at all

uppercase

Transforms all characters to uppercase

Recommended

Converting Your Typographic Units with Sass

Byron shows us a neat Sass function to convert typographic units in CSS. Learn how to convert pixels into em and percentage units with the...

Byron Houwens, 13 hours ago

HTML & CSS

CSS Architecture and the Three Pillars of Maintainable CSS

Zsolt Nagy discusses three principles of CSS architecture and why mastering them will help you keep your CSS maintainable and lean.

Zsolt Nagy, 5 days ago

HTML & CSS

Converting Your Typographic Units with Sass

Byron shows us a neat Sass function to convert typographic units in CSS. Learn how to convert pixels into em and percentage units with the magic of Sass.

HTML & CSS

CSS Architecture and the Three Pillars of Maintainable CSS

Zsolt Nagy discusses three principles of CSS architecture and why mastering them will help you keep your CSS maintainable and lean.

Meet the author

Adam Roberts

Adam is SitePoint's head of content, who also writes Versioning, a daily newsletter covering everything new and interesting in the world of web development. He has a beard and will talk to you about beer and Star Wars, if you let him.