Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 31st of October 2014 05:49:44 PM

Appendix B. HTML 2.0 Style Sheet

The style sheet provided in this chapter was excerpted from the CSS1 specification and is included here to give authors an idea of how legacy browser behavior in handling HTML can be reproduced, or at least approximated, using CSS1 rules. A thorough understanding of this style sheet is a good first step to understanding how CSS1 operates. The simpler HTML 2.0 style sheet is reproduced here in order to minimize complexity and possible confusion. A suggested style sheet for HTML 3.2 is also available on the W3C web site, as part of the CSS2 specification.

This HTML 2.0 style sheet was written by Todd Fahrner, in accordance with the suggested rendering in the HTML 2.0 specification:

 BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
color: black;
}
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV,
DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP,
IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em }
H5, H6 { margin-top: 1em }
H1 { text-align: center }
H1, H2, H4, H6 { font-weight: bold }
H3, H5 { font-style: italic }
H1 { font-size: xx-large }
H2 { font-size: x-large }
H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relative to the parent */
I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic }
PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em }
BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
take with using named colors, but at least with the specified sixteen
colors, there is some moderate hope of consistency.

Okay, so that was the easiest way to specify color -- scary as that may seem, it's true. The other four ways are a bit more complicated. The advantage is that with these methods, you can specify any color in the 8-bit color spectrum, not just sixteen (or however many) named colors. This is accomplished by taking advantage of the way colors are generated by computers.

UL, DIR { list-style: disc } OL { list-style: decimal } MENU { margin: 0 } /* tight formatting */ LI { margin-left: 3em } DT { margin-bottom: 0 } DD { margin-top: 0; margin-left: 3em } HR { border-top: solid } /* 'border-bottom' could also have been used */ A:link { color: blue } /* unvisited link */ A:visited { color: red } /* visited links */ A:active { color: lime } /* active links */ /* setting the anchor border around IMG elements requires contextual selectors */ A:link IMG { border: 2px solid blue } A:visited IMG { border: 2px solid red } A:active IMG { border: 2px solid lime }


Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

In the first place, padding and Navigator 4.x just plain don't getalong. The main problem is that you can set padding on an elementwith a background color, but the background won't extend intothe padding unless you get very sneaky. You need to add a border, aswas discussed earlier in "Margins: Known Issues."Therefore, if you have a background color, some padding, and a borderset for an element, you'll see the background fill the contentarea and the padding as requested, but a transparent space willincorrectly appear between the two, as shown in Figure 7-62.

This will allow the images' left margins to scale along withthe environment.

Since we only have two images, and both of them require the sameeffect, this declaration will work just fine. Figure 11-9 reveals the result.

Figure 11-9

Figure 11-9. Floating images

As you can see, the first column is now quite a bit longer than thesecond. However, since we haven't done much of anything to thesecond column, let's leave things as they are for the moment.

As a matter of fact, the rule for A:hover would be used while the pointer hovers over any anchor, not just a hyperlink. While some other pseudo-classes, like :link and :visited , are constrained to the A element in HTML, the same is not true of :hover. User agents could, in theory, allow the assignment of hover styles to any element, like this:

P:hover {font-weight: bold;}

Therefore, if you want to make sure your hover styles are applied