Abakada: Back to Basics > Language References > CSS Properties > Text Properties > text-transform Property

---

Sets or retrieves the rendering of the object’s text.

CSS	{ text-transform: 'none' | 'capitalize' | 'uppercase' | 'lowercase' }
Script	object.style.textTransform = sTransform ]

none	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.

The property is read/write with a default value of none; the CSS attribute is inherited.

The following example demonstrates the effects of applying the different values possible for the CSS text-transform attribute.

 Show me 

The following examples demonstrate use of inline event handlers to dynamically transform an element’s text. Both methods yield the same effect.

The sample below defines text-transform style attributes in an embedded stylesheet, and invokes calls to the stylesheet to transform the text in response to mouse events.

<style type="text/css">
<!--
   .caps { text-transform: capitalize }
   .upper { text-transform: uppercase }
   .lower { text-transform: lowercase }
-->
</style>
...
<p onmouseover="this.className='caps'"
   onclick="this.className='upper'"
   ondblclick="this.className='lower'"
   onmouseout="this.className=''">
   ...
</p>

 Show me 

The sample below uses inline event handlers to dynamically transform an object’s text in response to mouse events.

<p onmouseover="this.style.textTransform='capitalize'"
   onclick="this.style.textTransform='uppercase'"
   ondblclick="this.style.textTransform='lowercase'"
   onmouseout="this.style.textTransform=''">
   ...
</p>

 Show me