text-transform property
Specifies the rendering of the text in the object.
  |
Syntax
text-transform: capitalize | uppercase | lowercase | none
Property values
A variable of type String that specifies or receives one of the following values:
none-
Default. Text is not transformed.
capitalize-
Transforms the first character of each word to uppercase.
uppercase-
Transforms all the characters to uppercase.
lowercase-
Transforms all the characters to lowercase.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | 1 |
| Initial Value |
Standards information
- CSS 2.1, Section 5.4.5
Examples
The following examples use the text-transform attribute and the text-transform property to transform a block of text from lower case to upper case when the user moves the mouse over the text. The text transforms back to lower case when the user clicks the text.
This example uses three calls to an embedded (global) style sheet to transform the text.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/text-transform.htm
<!DOCTYPE html>
<html>
<head>
<title>text-transform</title>
<style>
.transform1 {
text-transform: uppercase;
}
.transform2 {
text-transform: lowercase;
}
.transform3 {
text-transform: none;
color: green;
}
</style>
</head>
<body>
<div style="font-size: 14px" onmouseover="this.className='transform1'"
onclick="this.className='transform2'" ondblclick="this.className='transform3'">
Run your mouse over me to<br>
capitalize all letters of each word.<br>
Click me to make all letters lowercase.<br>
Double-click me to return to the default setting but in green.<br>
In this example we use inline scripting to call<br>
stylesheet classes from mouse events.
</div>
</body>
</html>
This example uses inline scripting to transform the text when different mouse events occur.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/textTransform.htm
<!DOCTYPE html> <html> <head> <title>textTransform</title> </head> <body> <!-- HERE WE CALL THE FUNCTIONS TO HANDLE MOUSE EVENTS: --> <div style="font-size: 14px" onmouseover="this.style.textTransform='uppercase'" onmouseout="this.style.textTransform='lowercase'" onclick="this.style.textTransform='none'"> Run your mouse over this text to <br> capitalize all letters of each word.<br> Your mouseout will result in all the letters being made lowercase.<br> Click to return to default the setting. </div> <script> var oTxt = document.getElementById('oTxt'); function changeText1() { oTxt.style.textTransform = "uppercase"; } function changeText2() { oTxt.style.textTransform = "lowercase"; } function changeText3() { oTxt.style.textTransform = "none"; } </script> </body> </html>
See also