Text-Transform in CSS

The text-transform property permits us to alter the text case. It controls the capitalization of the text. This property is employed to design the text appearance in every uppercase or every lowercase, or it may transform each word’s first character to uppercase.

Syntax:

 Let’s understand the above property values one by one with an example.

  • Capitalize

It transforms each word’s first character to uppercase. But, it can’t change any first letter after any number into the capitalized form. It can affect any word’s first letter only, rather changing the other letters of any word.

The letter in any word that has already defined in the capitalized form will not be switched to the lowercase form by using this property.
The example to describe the capitalize property is illustrated below:

Syntax:

Example:

Output:

CSS Text-Transform
  • uppercase

As the name suggests, it transforms word’s every character into uppercase.

Syntax:

Example:

Output:

CSS Text-Transform
  • lowercase

This property can transform word’s every character into lowercase.

Syntax:

Example:        

Output:

CSS Text-Transform
  • none

This property does not provide any capitalization and it is defined as a default value. It delivers any text form as it is.

Syntax:

Example:

Output:

CSS Text-Transform

Pin It on Pinterest

Share This