Cascading Style Sheets: The Definitive Guide, Second Edition

Text Transformation

Now let’s look at ways to manipulate the capitalization of text using the property text-transform.

text-transform

Values

uppercase | lowercase | capitalize | none | inherit

Initial value

none

Applies to

all elements

Inherited

yes

Computed value

as specified

The default value none leaves the text alone and uses whatever capitalization exists in the source document. As their names imply, uppercase and lowercase convert text into all upper- or lowercase characters. Finally, capitalize capitalizes only the first letter of each word. Figure 6-24 illustrates each of these settings in a variety of ways:

h1 {text-transform: capitalize;}
strong {text-transform: uppercase;}
p.cummings {text-transform: lowercase;}
p.raw {text-transform: none;}

<h1>The heading-one at the beginninG</h1>
<p>
By default, text is displayed in the capitalization it has in the source 
document, but <strong>it is possible to change this</strong> using 
the property 'text-transform'.
</p>
<p class="cummings">
For example, one could Create TEXT such as might have been Written by 
the late Poet e.e.cummings.
</p>
<p class="raw">
If you feel the need to Explicitly Declare the transformation of text
to be 'none', that can be done as well.
</p>

Figure 6-24. Various kinds of text transformation

Different user agents may have different ways of deciding where words begin and, as a result, which letters are capitalized. ...