CSS Text-Transform Property

The text-transform property controls how upper and lower cases are displayed. Possible values are:

• capitalize: capitalizes the first letter in a word.
• uppercase: makes the entire word upper case.
• lowercase: makes the entire word lower case.
• none: no transformation is performed.

Several examples are shown below.

Example 1: text-transform is set to capitalize

CSS Declaration

p {text-transform: capitalize;}

The following HTML,

<p>Today is February 22nd.

renders:

In Example 1, the first letter of each word is capitalized, regardless of whether it was capitalized in the first place. One thing to note is that if the first letter of a word is preceded by a number (in this case "22nd"), the first letter is not capitalized when text-transform is set to "capitalize."

Example 2: text-transform is set to uppercase

CSS Declaration

p {text-transform: uppercase;}

The following HTML,

<p>Today is February 22nd.

renders:

In Example 2, setting text-transform to "uppercase" results in all letters being capitalized.

Example 3: text-transform is set to lowercase

CSS Declaration

p {text-transform: lowercase;}

The following HTML,

<p>Today is February 22nd.

renders:

In Example 3, setting text-transform to "lowercase" results in all letters being displayed in lower case.