Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 24th of February 2017 01:53:17 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

<P STYLE="height: 3em;">

then the browser is supposed to provide a way to see all content without increasing the height. This could possibly mean adding a scrollbar to the element, as shown in Figure 8-4.

Figure 8-4

Figure 8-4. One way to handle a short height on a tall element

In practice, most browsers will not do this. They will instead simply increase the height of the element, as though the value of height had been set to auto. This is permitted under CSS1, which states that browsers can ignore 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 }
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.

is set it to the default value of none. This is good practice because list-style-image is inherited -- so any nested lists will pick up the image as the bullet, unless you prevent this from happening:

UL {list-style-image: url(ohio.gif); list-style-type: square;}
UL UL {list-style-image: none;}

Since the nested list inherits the item type square but has been set to use no image for its bullets, squares are used for the bullets in the nested list, as

Figure 6-5

Figure 6-5. Setting different colors for different hyperlink classes

This sort of thing simply isn't possible with the oldBODY attributes. Furthermore, if you'regoing to use the BODY attributes, you have todefine them in each and every document. If you ever decide to changethose values ...well, you have a lot of files to edit, don'tyou? On the other hand, if you set up these colors as an externalstyle sheet, and then link all of your pages to the style sheet, thenyou only have to edit one file in order to change the text colors ofevery last one of your pages.