Styles with Class

One of the main reasons for using style sheets is to get rid of formatting tags like <i> and <b>. On pages that use these tags, the tags are just being used to make the page appear the way the designer wanted it to appear. Using CSS instead, as in Script 11.3, we get rid of these sorts of formatting tags and instead define precisely how we want the text to display. We've added four new CSS rules to Script 11.2 to add some real style to the text. The result is shown in Figure 11.3.

Script 11.3. This addition to the CSS introduces classes such as `.character`.

body { background-color: white; color: black; } img { margin-right: 10px; } .character { font-weight: bold; text-transform: uppercase; } div.character { margin: 1.5em 0em 1em 17em; } .directions { font-style: italic; } .dialog, .directions { margin-left: 22em; }

Figure 11.3. The modified style sheet has made the character names bold and uppercase, italicized the stage directions, and added the various indenting for the text elements.

[View full size image]

To format text with CSS:

1.	.character { font-weight: bold; text-transform: uppercase; } This rule applies to a named `character`. Within the page, we can say that some text is of this class (for example, like this: `<div class="character">Petruchio</div>`), and that the text will display using this rule. In this rule, all character names end up being bold and uppercase. Note that to define a class rule, it must be preceded by a period. In Script 11.1, `class="character"` is used in two different ways, both as an attribute for multiple `divs` and as an attribute for a `span`. This rule applies to both.

2.	div.character { margin: 1.5em 0em 1em 17em; } However, `div.character` applies only to those places where `class="character"` is an attribute of a `div`. Those `divs` will have a top margin of 1.5 ems, a zero right margin, a bottom margin of 1 em, and a left margin of 17 ems. Note that rules with four values go clockwise starting from the top, and that the big left margin is required to work around the image.
3.	.directions { font-style: italic; } Here's another rule and class; this one is named `directions`. Every class specified as being of type `directions` (i.e., all stage directions) will be shown in italics.
4.	.dialog, .directions { margin-left: 22em; } The last rule applies to both the `dialog` and `directions` classes. Classes can be separated with a comma, and the rule then applies to both.

What's an Em?

CSS sizes come in two flavors: relative and absolute. Relative sizes (shown in Table 11.1) are those that are defined in terms of their relationship to some element on the page, while absolute sizes (shown in Table 11.2) are, well, absolute; they are fixed to a particular size.

Table 11.1. Relative Sizes
Size
Definition
em
The width of the letter M in the chosen font
ex
The height of the letter x in the chosen font
px
Pixels

Table 11.2. Absolute Sizes
Size
Definition
pt
Point size, where 1 pt = 1/72 of an inch
in
Inches
mm
Millimeters
cm
Centimeters
pc
Picas, where 1 pc = 1/6 of an inch

Overall, the W3C strongly recommends that you use relative sizes on your pages instead of absolute, unless you are absolutely certain of the dimensions of the display device (and that's darned rare for a Web page).

Note that points and pixels are not the same thing at all! While Macs started out with 1pt=1px, things have changed since the days of the 9" black and white screen. And on PCs, points and pixels have never been equivalent.

However, as the saying goes, in theory, there's no difference between theory and practice. And in practice, you may have better results if you stick with pixelsbut no matter what you use, you'll never be able to guarantee that what your site visitors see is what you designed.