March 2004
Intermediate to advanced
528 pages
16h 33m
English
Content preview from Cascading Style Sheets: The Definitive Guide, Second Edition
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
Start your free trial


Text Transformation
Now let’s look at ways to
manipulate the capitalization of text using the property
text-transform.
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. ...