Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 06th of July 2015 09:55:36 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 SPAN {background: gray;} BIG {font-size: 250%; line-height: 1em; background: silver;} ...line in which</SPAN><BIG>some big text</BIG><SPAN>is found...

The results of this are shown in Figure 8-61. By setting a line-height for the BIG element, the overall height of the line box has been increased, thus providing enough room for the BIG element to be displayed without overlapping any other text and without changing the line-height of all lines in the paragraph. We use 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 }
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.

same as that shown in Figure 8-13:

P {margin-left: 100px; margin-right: 100px;} /* same as before */

WARNING

In practice, only browsers released in early 1999 or later correctlyhandle auto, and not even all of them get itright. Those that do not handle auto marginscorrectly will behave in inconsistent ways, but the safest bet is toassume that they will set both margins to zero. The browsers that doget this right are Internet Explorer 4.5 and 5 for Macintosh, andcontent of the paragraphs is being "displaced" by thefloated element. However, each paragraph's element width isstill as wide as its parent element. Therefore, its content areaspans the width of the parent, and so does the background. The actualcontent doesn't flow all the way across its own content area inorder to avoid being obscured behind the floating element.

8.3.2.1. Negative margins

As was discussed in the previous chapter,