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.

TIP

The 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.

Table 44.1. Common CSS Formatting Attributes

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;

TIP

The 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.

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 >over</span> this,</q> said Captain Steward. </p> 

Figure 44.1. Use CSS to create overlines instead of underlines.

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 >The Buck Stops Here.</span> That's what the placard on his desk said. </p> 

Figure 44.2. Convert lowercase letters in the source code to small caps in the browser.

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> 

Figure 44.3. Change sentence casing with the values of the text-transform attribute.