Creating Small Caps

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 Values




IE4, FF1, S1, O3.5, CSS1


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:



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" " /xhtml1 strict.dtd">  <html xmlns="">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>CSS, DHTML &amp; 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>



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


  • Small caps are best reserved for titles or other special text; they are hard to read at smaller sizes.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

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