Text transformation in CSS

Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code.

An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform:

capitalize

Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".

uppercase

Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".

lowercase

Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".

none

No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.

Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase.

 
 h1 {
  text-transform: uppercase;
 }

 li {
  text-transform: capitalize;
 }