The text-transform CSS property gives you the ability to change the case of the text.

This property can be used to change all letters uppercase, only the first word to uppercase or change every letter to lowercase. This can save time and make your code look more uniform for someone reviewing it later. text-transform is probably most commonly used to make a certain text standout , there’s just something about all caps that make a word look better.

Syntax

Let’s take a look at the syntax:

  text-transform: capitalize|uppercase|lowercase

The code above shows you how you would use this property in css with its different values. So Let’s explain those values in the next section.

Values

• uppercase :
  The uppercase value changes all letters to caps.

See the Pen text-transform by oscar (@nopity) on CodePen.

• lowercase :
  The lowercase value turns all letters to lowercase.

See the Pen text-transform: lowercase by oscar (@nopity) on CodePen.

As you can see in the code above, even though the paragraph has capital letters the final output is all lowercase which makes it easy to change the the case with out touching the code too much.

• capitalize :
  This value does something similar like uppercase value with one key difference in that it only capitalizes the first letter of each word.

See the Pen text-transform: capitalize by oscar (@nopity) on CodePen.

Browser Compatibility

Supported in Google Chrome 1.0/up , Explorer 4.0/up, Firefox 1.0 and up, Safari 1.0/up , and Opera 7.0/up.

Special Notes

The capital value behaves in a certain way when it comes to the text its trying to change.

For dates that are written in the format “February 4th, 2016” it won’t change to “February 4Th, 2016”, which makes sense for most applications.

It’s also important to note that capitalize only turns the first letter capital and ignores the rest of the word. So “gamE” will change too “GamE”.

One last note before closing this article is that the capitalize value will also change the first letter after double, single quotes or the first letter after a hyphen.

So we covered the most common uses of the text-transform CSS property and as you see its good to use to change text quickly.