• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 4. Text Controls > Setting Text Case

Setting Text Case

When you're dealing with dynamically generated output, you can never be sure whether the text will appear in uppercase, lowercase, or a mixture. With the text-transform property, you can control the ultimate case of the text no matter what it is to begin with.

In this example, the names of the characters have been typed in the HTML (Code 4.4) in lowercase characters. When displayed in the browser (Figure 4.4), however, the text is transformed into its correct format.

Code 4.4. The class name, if invoked, will force words to be displayed in initial caps.

Figure 4.4. Even though the text is lowercase in the HTML, it's displayed in uppercase in the browser.

To define the text case:


Type the text-transform property name, followed by a colon (:), in the CSS definition list.


Type one of the following values (Table 4.4) 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


If you want specific text to be uppercase, you should type it as uppercase, so that older browsers won't be left out.


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.

Table 4.4. text-transform Values
Value Compatibility
capitalize IE4, N4, CSS1
uppercase IE4, N4, CSS1
lowercase IE4, N4, CSS1
none IE4, N4, CSS1

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint