The text-transform
property specifies the test case and controls the way text is capitalized. Using this property, you can set the text case as all-lowercase, all-uppercase or with each word capitalized.
The text-transform values are stated below.
uppercase
: Transforms all characters to uppercase.
lowercase
: Transforms all characters to lowercase.
capitalize
: Transforms the first character of each word to uppercase. There will be no effect on the other characters.
none
: There will be no change in the text case and the capitalization. This is the default value.
initial
: Sets the default value of the property.
inherit
: Inherits the value of this property from its parent element.
HTML
<p class="uppercase">This texT will appear in UpperCase</p>
<p class="lowercase">This texT will appear in LowerCase</p>
<p class="capitalize">This texT will be Capitalized</p>
CSS
.uppercase{
text-transform: uppercase;
}
.lowercase{
text-transform: lowercase;
}
.capitalize{
text-transform: capitalize;
}
This texT will appear in UpperCase
This texT will appear in LowerCase
This texT will be Capitalized
The above example demonstrates it all. Also note that capitalize
will not capitalize the first letter which is after a number. The following example will make it clear.
HTML
<p class="capitalize">This is July</p>
<p class="capitalize">This is 4th July</p>
<p class="capitalize">This is !exclamation</p>
CSS
.capitalize{
text-transform: capitalize;
}
This is July
This is 4th July
This is !exclamation
Here, it didn't capitalize the first letter followed by the number 4, but it did capitalize the letter followed by '!'.
Browser Support
text-transform
property is supported by all the browsers