| Small caps (sometimes referred to as mini-caps) are useful for emphasizing titles (Table 3.9). With small caps, lowercase letters are converted to uppercase, but in a slightly smaller size than regular uppercase letters (Figure 3.11). Table 3.9. Font-Variant ValuesVALUE | COMPATIBILITY |
|---|
normal | IE4, FF1, S1, O3.5, CSS1 | small-caps | IE4, FF1, S1, O3.5, CSS1 |
Figure 3.11. All the letters are capitals, but the first letter is larger than the rest. In this example (Figure 3.12), small caps are applied to the entire header area, but this is overridden for the author's name. Figure 3.12. Using small caps for the title is an elegant way to set it off from the rest of the text.
To make a rule for small caps: | | 1. | font-variant: Type the property name font-variant (Code 3.5), followed by a colon (:). Code 3.5. The header ID is set to be displayed in small caps, but the author class will override that.| [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 | Creating Small Caps</title> <style type="text/css" media="all"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; } #header { font-variant: small-caps; } .author { font-variant: normal; } </style> </head> <body> <div > <h1>Alice's Adventures in Wonderland</h1> <p >Lewis Carroll</p> <h2>CHAPTER V<br /> Advice from a Caterpillar</h2> </div> <p> The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> </body> </html> |
| 2. | small-caps; Type the value of the font-variant property, using one of the following options: small-caps, which sets lowercase letters as smaller versions of true uppercase letters normal, which overrides other font-variant values that might be inherited
|
Tip |