The text-transform Property

The text-transform property affects the capitalization or the case of the letters in an element. This property can transform all the letters in an element into capitals or into lowercase letters, or it can capitalize the first letter of every word.

The text-transform property can be applied to any element. Its values can be any one of these: uppercase, lowercase, capitalize, none, or inherit. The initial value is none.

text-transform:uppercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to uppercase.

Example 1: <p style="font-size:35px;font-family:'Times New Roman';text-transform:uppercase">the quick brown fox 123</p>

In the above example, though all the letters in the <p> are lowercase, the text-transform:uppercase declaration transforms all the letters to uppercase.

text-transform:lowercase

The text-transform:uppercase declaration transforms all the letters in an element (and its descendants) to lowercase.

Example 2: <p style="font-size:35px;font-family:'Times New Roman';text-transform:lowercase">The QuicK brown FOX 123</p>

 

In the above example, though all the letters in the <p> are a mix of lowercase and uppercase, the text-transform:lowercase declaration transforms all the letters to lowercase.

text-transform:capitalize

The text-transform:capitalize declaration transforms the first letters of all the words in an element (and its descendants) to uppercase, that is, it capitalizes all the words.

Note: In Firefox 3 and Firefox 3.5 only the first letter of a hyphenated word is capitalized. However, in Internet Explorer 6, Internet Explorer 7 and Internet Explorer 8, the first letter and the letter after the hyphen are capitalized.

Example 3: <p style="font-size:35px;font-family:'Times New Roman';text-transform:capitalize">the quick-brown fox jumps over</p>

 

In the above example, the first letter of each word is capitalized.

text-transform:none

The text-transform:none declaration restores the default browser behavior of displaying letters in the same case as they are in the element. This declaration is useful to override another inherited text-transform declaration on an element. 

Example 4: <div style="text-transform:uppercase"><p style="font-size:35px;font-family:'Times New Roman';text-transform:none">The Quick Brown Fox Jumps</p></div>

In the above example, the text-transform:none declaration overrides the inherited text-transform:uppercase declaration inherited from the div. Therefore, the text in the <p> is not transformed to uppercase.

text-transform:inherit

text-transform:inherit is used to override another text-transform declaration that has been applied to an element, and to restore the default behavior of inheriting the parent element's text-transform declaration.

Internet Explorer 6 and Internet Explorer 7 do not support text-transform:inherit, they ignore the declaration.

Conclusion

The text-transform:inherit declaration should be avoided because Internet Explorer 6 and Internet Explorer 7 ignore it.

With the text-transform:capitalize declaration, Internet Explorer capitalizes the first letter and the letter after the hyphen in hyphenated words. However, Firefox 3 and Firefox 3.5 only capitalizes the first letter of hyphenated words. Therefore, text-transform:capitalize should not be used on elements that contain hyphenated words.