text-transform (CSS property)

By Adam Roberts

HTML & CSS

September 2, 2014

Write powerful, clean and maintainable JavaScript.

~~RRP $11.95~~

Get the book free!

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

Adam Roberts

Adam is SitePoint's head of newsletters, who mainly 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.