Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 31st of January 2015 03:34:28 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 }
height will be scaled to match, unless it has been explicitly set to
a certain value. Figure 8-27 shows a few
possibilities.

Figure 8-27

Figure 8-27. Scaling images with the width property

It's also possible to scale an image (or other replaced element) using height:

<IMG SRC="test.gif" STYLE="display: block;" ALT="test image">
<IMG SRC="test.gif" STYLE="display: block; height: 50px;" ALT="test image">
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.

Correctly implemented user agents will collapse the vertically adjacent margins, as shown in the first list in Figure 7-16, where there are 15-pixel spaces between each list item. The second list shows what would happen if the user agent didn't collapse margins, resulting in 25-pixel spaces between list items.

Another word to use, if you don't like "collapse," is "overlap." Although the margins are not really overlapping, you can visualize what's happening using