In this section, we will learn what the text-transform property is and how to use it in CSS.

Click here to run the example of text-transform property.

CSS text-transform Property Definition and Usage

As the name of the CSS `text-transform` property suggests, when the goal is to transform a text into uppercase or lowercase or capitalize it, we can use this property.

CSS text-transform Property Syntax

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

CSS text-transform Property Value

There are 3 values can be set for this property:

1. uppercase: We use “uppercase” as the value for text-transform when the goal is to uppercase the entire letters of a text.
2. lowercase: We use “lowercase” as the value for text-transform when the goal is to transform the entire letters of a text into lowercase.
3. capitalize: We use “capitalize” as the value for text-transform when we want to capitalize a text content.

Note: the two global values “initial” and “inherit” can also be used for this property.

Example: CSS text uppercase

See the Pen CSS text uppercase by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: CSS capitalize first letter

See the Pen CSS capitalize first letter by Omid Dehghan (@enjoytutorials1) on CodePen.

Example: caps to lowercase

See the Pen caps to lowercase by Omid Dehghan (@enjoytutorials1) on CodePen.