| When you're dealing with dynamically generated output, from a database for example, you can never be sure whether the text will appear in uppercase, lowercase, or a mixture. With the text-TRansform property (Table 4.4), you can control the ultimate case of the text no matter what it begins with. Table 4.4. Text-Transform ValuesVALUE | COMPATIBILITY |
|---|
capitalize | IE4, FF1, S1, O3.5, CSS1 | uppercase | IE4, FF1, S1, O3.5, CSS1 | lowercase | IE4, FF1, S1, O3.5, CSS1 | none | IE4, FF1, S1, O3.5, CSS1 |
In this example (Figure 4.4), the level 1 heading tag is forced into uppercase, the level 2 heading is forced into lower case, although the chapter title class overrides thisdisplaying the text as typedand the author name is forced to capitalize, even though all of the letters are lowercase. Figure 4.4. The text in the level 1 heading is in all caps (typical for book titles). The chapter number is forced into lowercase, and the chapter title ignores the lowercase. 
To define the text case: | | 1. | text-transform:
Type the text-transform property name, followed by a colon (:), in the CSS definition list (Code 4.4).
Code 4.4. You can add the text-transform property to various tags to ensure that the text appears the way you want it to, regardless of how it appears in the HTML.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD  /xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS, DHTML & Ajax | Setting Text Case</title> <style type="text/css" media="screen"> <!-- body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; text-transform: none; } h1 { text-transform: uppercase; } h2 { text-transform: lowercase; } .author { text-transform: capitalize; } .chapterTitle { text-transform: none; } --> </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >lewis carroll</p> <h2>CHAPTER IV<br /> <span >The Rabbit Sends in a Little Bill</span></h2> </div> <p>It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something...</p> </body> </html>
|
| 2. | uppercase;
Type one of the following values for text-TRansform to specify how you want the text to be treated:
capitalize sets the first letter of each word in uppercase uppercase forces all letters to be uppercase lowercase forces all letters to be lowercase none overrides inherited text-case values and leaves the text as-is
|
 Tips
You shouldn't rely on text-case. If you want specific text to be uppercase, you should type it as uppercase. The text-transform property probably is best reserved for formatting text that is being created dynamically. If the names in a database are all uppercase, for example, you can use text-transform to make them more legible when displayed.
|
