Section 14.3. Applying Typographic Styles

14.3. Applying Typographic Styles

When you're building a site with Cascading Style Sheets, you aren't playing around. You get a host of typographic styles: everything from boldface to small caps. The procedures for adding them vary, though. Sometimes you use the Property Inspector. Other times you go for the CSS Rule Definition dialog box, as the following sections demonstrate.

14.3.1. Adding Boldface and Italics

The B and I buttons on the Property Inspector control boldface and italic type styles, respectively. Normally, this humble tome advises against you clicking the buttons of the Property Inspector whenever it comes to text, because Dreamweaver embeds the corresponding CSS code into your page rather than writing it into your external stylesheet. However, bold and italic type styles are an exception to this rule, because these buttons don't generate CSS code. Rather, when you click them, they insert good old ordinary HTML tags. So feel free to highlight a word or string of text, and click B for bold or I for italic, as Figure 14-5 shows.

Figure 14-5. Click the B or I buttons on the Property Inspector to apply boldface or italic type styles to otherwise normal text

BEHIND THE SCENES

The B button on the Property Inspector creates <strong> tags around the selected text, while the I button creates <em> or emphasis tags. All the major browsers translate <strong> tags as boldface and <em> tags as italics.

That said, it makes good sense to lay off the B and I buttons when you need to apply bold or italic type styles consistently on a particular kind of text, say, for instance, the special paragraph style for the title of your page. In cases like these, simply build the boldface or italics into the style rule when you create it. In the CSS Rule Definition dialog box shown in Figure 14-6, set boldface from the Weight menu and set italics from the Style menu.

Figure 14-6. The Weight and Style menus are under the Type category

BEST BET

To apply boldface or italic type styles to a few words here and there in otherwise normal text, feel free to use the B and I buttons on the Property Inspector. To apply boldface or italics consistently for a particular kind of text, build the boldface or italics into the style rule.

You'll also discover some interesting choices under both the Weight and the Style menus, like Bolder and Lighter for the weight and Oblique for the style. Currently, no major browser does anything special with these options, so just stick with bold and italic.

14.3.2. Transforming Lowercase Letters to Small Caps

In typographical circles, small caps or small capitals refer to smaller versions of uppercase letters (A, B, C) that stand in for lowercase letters (a, b, c). Using small caps is a great way to get an old-style look in headings and heading-like paragraph styles, as Figure 14-7 shows.

Figure 14-7. For old-style headlines, convert lowercase letters to small caps

To add small caps to a CSS style, set the Variant menu on the CSS Rule Definition dialog box to small-caps, as shown in Figure 14-8. The browser automatically converts all lowercase letters in text of this style to small caps.

TIP

Avoid using small caps in running text, as this style can be hard on the eyes, particularly at smaller type sizes.

Figure 14-8. Set small caps from the Variant menu

TECHTALK

Small caps or small capitals are smaller versions of uppercase letters that stand in for lowercase letters.

It's important to note that Dreamweaver's document window displays small caps as regular capital letters. You have to preview your page in a live browser to see the small caps in action. All the major browsers support this style.

14.3.3. Transforming Type Casing

Similarly, you can change the way the browser displays the casing of a block of type with the capitalize, uppercase, and lowercase values, all of which appear under the Case menu of the CSS Rule Definition dialog box, as Figure 14-9 shows.

Figure 14-9. Change the casing of a block of type from the Case menu

Table 14-1 summarizes the effects of these values when you assign them to a style rule. Note that, in each instance, you aren't changing the actual text of your web page. You're simply changing the way that the browser displays your text. So if you build a lowercase transformation into your default first-level heading style, any uppercase letters in your first-level headings remain uppercase letters in the HTML code. On screen, the browser displays them as if they were lowercase.

Table 14-1. Effects of the casing values
Value	Description	In the code	On the screen
Capitalize	Transforms the first letter in each word to a capital letter	This is sample text.	This Is Sample Text.
Uppercase	Transforms all letters to capitals	This is sample text.	THIS IS SAMPLE TEXT.
Lowercase	Transforms all letters to lowercase	This is sample text.	this is sample text.

14.3.4. Avoiding the Underline Style

Many web designers see that Underline option in the CSS Rule Definition dialog box and go ape. Soon, everything is underlined on their web pages. This humble tome urges you to resist the impulse. In fact, it goes so far as to suggest that you forget you ever saw anything about underlines in the CSS Rule Definition dialog box.

Underlines are for links. That's what your visitors expect. If you underline text that isn't a link, your visitors will try to click it anyway, and then they'll get frustrated when your "links" don't work. If you don't want to underline links on your site, that's your concern, but don't compensate by underlining everything else in sight. It's far better to forego this style altogether than to underline something that isn't a link.