CSS Property text-transform
text-transform changes the case of letters in an element.
Summary
| Item | Value |
|---|---|
| Initial value | none |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.textTransform="uppercase" |
| Applies to | All elements. |
CSS Syntax
text-transform: capitalize | lowercase | none | uppercase
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| none | No capitalization. Default value |
| capitalize | uppercase the first character of each word |
| uppercase | uppercase all characters |
| lowercase | lowercase all characters |
| inherit | inherit the text-transform property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
text-transform |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use text-transform CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p {<!-- w w w. ja va 2 s .c om-->
padding: 5px 25px;
background: mistyrose;
border: 1px solid orange;
}
span.lower {
text-transform: lowercase;
}
span.upper {
text-transform: uppercase;
}
span.capitalize {
text-transform: capitalize;
}
span.example {
background: pink;
}
</style>
</head>
<body>
<p>
<span class='lower example'>UPPERCASE TEXT LOWERCASE</span>
<span class='upper example'>lowercase text uppercase</span>
<span class='capitalize example'>capitalize every word.</span>.
</p>
</body>
</html>