Changing the Text Case

You can define the text case for your style by using the text-TRansform property. In this way, you can display the text either with initial capital letters, in all capital letters, in all small letters, or as it was typed.

Figure 10.35. I've decided to display the level 1 header in all uppercase letters for emphasis.

To change the text case:


Type text-transform:.


Type capitalize to put the first character of each word in uppercase.

Or type uppercase to change all the letters to uppercase.

Or type lowercase to change all the letters to lowercase.

Or type none to leave the text as is (possibly canceling out an inherited value).

Figure 10.36. Now the header really stands out.


  • I'm unimpressed with the capitalize value. While I sometimes need to capitalize all the important words in a sentence, or even just the first word in a sentence, I am hard pressed to think of an example where I'd need to capitalize everything. Now, a true headline-style capitalization property would be welcome. Of course it would have to be language dependent.

  • The lowercase value can be useful for creating stylish headers (or if you're e.e. cummings).

  • The text-transform property is inherited.

HTML, XHTML, & CSS(c) Visual QuickStart Guide
HTML, XHTML, and CSS, Sixth Edition
ISBN: 0321430840
EAN: 2147483647
Year: 2004
Pages: 340

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: