WEB DESIGN GARAGE [Electronic resources] نسخه متنی

Chapter 44. Creating Custom Formatting Styles

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.

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.

Want an overline instead of an underline? No problem. See Figure 44.1.

Listing 44.1. View Source for 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.

Listing 44.2. View Source for 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.

Listing 44.3. View Source for 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>