text-transform

The text-transform property sets the text character case: upper case (capital letters), lower case (lowercase small letters), and capitalize the first letter of each word.

Initial Value none
Applies to All elements, including ::first-letter and ::first-line
Inheritance yes
Animation discrete

The text-transform property specifies the case of the text. If case-sensitive text is marked up, it can be unified into all uppercase or lowercase, or only the beginning of a word can be capitalized.

Syntax

/* Keyword values */

text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;
text-transform: full-width;

/* Global values */

text-transform: inherit;
text-transform: initial;
text-transform: unset;

Description

valuewhat it does
noneDefault value. No conversion takes place. The text is displayed as is.
capitalizeEach word in the sentence will begin with a capital letter.
uppercaseAll text characters are changed to capital (upper case).
lowercaseAll text characters become lowercase (lowercase).
inheritThe value is inherited from the parent element.
initialSets the default value.

Example

capitalize

Duis eu convallis dolor, nec gravida nisl. Proin tincidunt venenatis condimentum. Nam velit erat, dignissim accumsan nisi quis, euismod euismod turpis.

uppercase

Duis eu convallis dolor, nec gravida nisl. Proin tincidunt venenatis condimentum. Nam velit erat, dignissim accumsan nisi quis, euismod euismod turpis.

lowercase

Duis eu convallis dolor, nec gravida nisl. Proin tincidunt venenatis condimentum. Nam velit erat, dignissim accumsan nisi quis, euismod euismod turpis.

.ex-1 { 
text-transform : capitalize;
} 
.ex-2 { 
text-transform : uppercase;
} 
.ex-3 { 
text-transform : lowercase; 
}