Cascading Style Sheets: The Definitive Guide

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.

 BODY {
margin: 1em;
font-family: serif;
line-height: 1.1;
background: white;
Figure 8-46.

Figure 8-46. A multiple-line inline element
Basically, nothing's changed. All we did was take the single
line and break it into pieces, and then stack those pieces on top of
each other. Piece of cake.

In Figure 8-46, the borders for each line of text
also happen to coincide with the top and bottom of each line box.
This is only true because no padding or line height has been set for
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 }

A.4. Bug Reporting		C. CSS1 Properties

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

Thefact that Navigator 4.x understands LINK butdoesn't recognize @import statements can beturned to your advantage. Since any styles you place in an externalstyle sheet must be brought in via either LINK or@import, you can group all of the styles that willcause Navigator problems and put them into a style sheet that youthen import. Since Navigator will refuse to import this style sheet,it won't have to deal with styles it can't deal with. simple manner. The absolute value of the negative margin is subtracted from the positive margin -- or, to put it another way, the negative is added to the positive -- and the resulting value is the distance between the elements. Figure 8-21 provides two concrete examples.

Figure 8-21. Examples of negative vertical margins

You'll notice the "pulling" effect of negative top and bottom margins. This is really no different from the way in which negative horizontal margins cause an element to push outside of its negative length value, with the obvious difference that the amount of negativity will depend on the width of the parent element. Thus:

P {margin: -10%;}

Figure 7-20 illustrates the consequences of such a rule, where the amount by which paragraphs overlap each other and spill beyond the browser window is entirely dependent on the width of the window itself -- and the wider the window, the worse the situation becomes.