Lessons Community Resources Tools

Text Transformation

Syntax: text-transform: <value>
Possible Values: none | capitalize | uppercase | lowercase
Initial Value: none
Applies to: All elements
Inherited: Yes

The text-transform property allows text to be transformed by one of four properties:

  • capitalize (capitalizes first character of each word)
  • uppercase (capitalizes all characters of each word)
  • lowercase (uses small letters for all characters of each word)
  • none (the initial value)

Examples:

H2 { text-transform: uppercase }

H3 { text-transform: capitalize }


See example in action

The text-transform property should only be used to express a stylistic desire. It would be inappropriate, for example, to use text-transform to capitalize a list of countries or names.