5 out of 10 rated this helpful - Rate this topic

text-transform property

Sets or retrieves 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


<STYLE>
    .transform1 { text-transform:uppercase }
    .transform2 { text-transform:lowercase }
    .transform3 { text-transform:none }
</STYLE>
</HEAD>
<BODY> 
<DIV STYLE="font-size:14" 
    onmouseover="this.className='transform1'" 
    onclick= "this.className='transform2'"
    ondblclick="this.className='transform3'"> 
:
</DIV>

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


<DIV STYLE="font-size:14"
    onmouseover="this.style.textTransform='uppercase'"
    onmouseout="this.style.textTransform='lowercase'"
    onclick="this.style.textTransform='none'">
:
</DIV>

Community Additions

ADD