Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 24th of May 2015 06:52:34 AM

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 }
UL, DIR { list-style: disc }
OL { list-style: decimal }
MENU { margin: 0 }      /* tight formatting */
The link could specify the relative URL <A HREF="cadavers.html">(thedefault scheme is http://) or the absolute URL <A HREF="http://www.taxidermy.org/~mad_dog/cadavers.html">. Relative URLs are usually preferable.  If you moved your site to www.weirdos.net,you would have to fix all the absolute URLs; but the relative URLs wouldwork fine.  (They're shorter too.) 

If a URL omits the filename, the browser looks for a file named "index.html"in the specified directory.  If there is no such file, the browserlists the entire directory's contents.  You should name the top-levelpage of your website "index.html" to prevent this.  Then you 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 relation to one another. According to the specification, thick is always wider than medium , which is in turn always wider than thin.

However, the exact widths are not defined, so one user agent could set them to be equivalent to 5px , 3px , and 2px , while another sets them to be 3px , 2px , and 1px . Whatever width the user agent uses for each into another external style sheet and LINK it in. ( Just make sure your LINK comes before the @import statement.) You'll end up with something like this:

/* file 'link-styles.css' */        /* file 'import-styles.css' */
H1 {margin-bottom: 0;}              H1 {margin-bottom: 0;}
P {margin-top: -1em;}               P {margin-top: 0;}
<LINK REL="stylesheet" TYPE="text/css" HREF="link-styles.css"
TITLE="Linked">

Chapter 9. Positioning

The idea behind positioning is fairly simple. It allows you to define exactly where element boxes will appear relative to where they would ordinarily be -- or relative to a parent element, or another element, or even to the browser window itself. The power of this feature is both obvious and surprising. It shouldn't be too surprising to learn that this is the part of CSS2 that user agents usually first attempt to support. Given that there were some very good positioning implementations on the horizon as the book was being