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


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


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

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


  • 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

Get your free chapter of Level Up Your Web Apps with Go

Get a free chapter of Level Up Your Web Apps with Go, plus updates and exclusive offers from SitePoint.

No Reader comments

Related books & courses
Available now on SitePoint Premium

Preview for $1