By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Text-transform Property

How to use the text-transform property of CSS.

Edited: 2015-12-25 17:42

The CSS text-transform property can be used to transform the text in a element. It can either transform the text to all-uppercase or all-lowercase, and in addition, it can also be given a value of capitalize, which will transform only the first letter in each word of a text into uppercase.

Possible Values

  • uppercase [every letter is in uppercase]
  • lowercase [every letter is in lowercase]
  • capitalize [the first letter of each word is in capital letters]
p {
  text-transform: capitalize;
}

Inherited? - NO!

Text-transform example

In the below inline example, the text contained in the paragraph is transformed to all-uppercase using the value of uppercase in the text-transform property:

<p>This text should be changed into all-caps.</p>

Which will result in:

This text should be changed into all-caps.