The text-transform property specifies the casing of the font.
Options include none, uppercase, lowercase, and capitalized.
This text is transformed to uppercase.
This text displays in capital letters
<p style="text-transform: uppercase">
This text displays in capital letters
</p>
The text-transform property specifies the capitalization of text.
Text can be uppercase, lowercase, or capitalized.
Tip: If you know that your text is always lowercase, uppercase, or capitalized, then it is best to hardcode that inside the page, and not have the browser do extra work for each page that is loaded.
text-transform: none | capitalize | uppercase |
lowercase | initial | inherit;
| Value | Description |
|---|---|
| none | Default. Displays text as it is. |
| capitalize | Each first letter of the word are capitalized. |
| uppercase | All text are capitalized. |
| lowercase | All text are set to small letters. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
Click the buttons to see the different text-transform values.
The casing of this text is set with the text-transform property
<style>
.text-transform-example {
text-transform: lowercase;
}
</style>
<p class="text-transform-example">
The casing of this text is set
with the text-transform property
</p>
This table shows when text-transform support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
4.0 | Sep 1997 |
 Opera
|
7.0 | Jan 2003 |
 Safari
|
1.0 | Jun 2003 |
