Transforming Text with Capitalization .....................................................
If you thought that using the term decoration for underlining was strange, con-
sider using “transform” to describe capitalization. With the text-transform
property, you can specify initial caps, all-uppercase, or all-lowercase.
You might well ask: If you want all uppercase on a Web page, why don’t
you just press the Caps Lock key on your keyboard and forget about this
text-transform property?
First, you might want to make the text effects dynamic. Say that you want to
uppercase a sentence if the user clicks it. You can write a script that adjusts
the text-transformproperty to respond to user behaviors. Second, you
might want to make the capitalization conditional. Perhaps you want to use
initial caps for some headline styles in your site, but in other locations, you
want all-caps.
The only strangeness in the value names is that what the CSS leadership con-
fusingly calls the capitalizevalue is, in reality, initial caps.
<style>
h1.initcaps {text-transform: capitalize;}
h1.uppercase {text-transform: uppercase;}
</style>
Figure 5-10:
The text-
decora-
tion
properties
add various
kinds of
lines to text.
104 Part II: Looking Good with CSS
