For as beloved as HTML's formatting tags are in certain circles of Web design, these tags are pretty limited. They give you only the most basic formatting options: boldface, italic, underline, and strikethrough.
TIPThe formatting tags in HTML include b (boldface), i (italic), u (underline), and s or strike (strikethrough). |
You saw in Topic 43 how to mimic the effects of HTML's formatting tags with a simple style sheet. CSS opens the door to many other possibilities for formatting, as Table 44.1 shows.
CSS ATTRIBUTE | POSSIBLE VALUES | EXAMPLE |
|---|---|---|
font-weight | bold, bolder, lighter, normal | font-weight: bolder; |
font-style | italic, oblique, normal | font-style: oblique; |
font-variant | normal, small-caps | font-variant: small-caps; |
text-decoration | underline, overline, line-through, none | text-decoration: overline; |
text-transform | capitalize, uppercase, lowercase, none | text-transform: capitalize; |
TIPThe bolder and lighter font weights don't have a noticeable effect on screen, but you may be able to see a difference in hard copy. Additionally, in current browsers, the oblique font style looks identical to the italic font style, although future versions of browsers may display oblique text differently. |
Want an overline instead of an underline? No problem. See Figure 44.1.
<style type="text/css">
.o {
text-decoration: overline;
}
</style>
<p>
<q>I thought we went <span class="o">over</span> this,</q> said Captain Steward.
</p>
You can also render a string of text in small-caps style, which converts lowercase letters in the source code to smaller versions of capital letters in the browser, as in Figure 44.2.
<style type="text/css">
.sc {
font-variant: small-caps;
}
</style>
<p>
<span class="sc">The Buck Stops Here.</span> That's what the placard on his desk said.
</p>
Similarly, use the values capitalize, uppercase, and lowercase with the text-transform attribute to alter the sentence casing of the source code. In capitalized text, the first letter of each word displays with a capital letter. Uppercase text becomes all capitals in the browser, and lowercase text becomes all lowercase letters, no matter how the text appears in the source code, as you can see in Figure 44.3.
<p style="text-transform: capitalize;">an ordinary line of text, so transformed by CSS</p> <p style="text-transform: uppercase;">an ordinary line of text, so transformed by CSS</p> <p style="text-transform: lowercase;">an ordinary line of text, so transformed by CSS</p>