Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 01st of March 2015 08:16:14 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:

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 }
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 }
elements within that line. However, this fact deserves to be
emphasized again, due to its importance. Assume, for example, that a
line contains an image which has been middle-aligned, and an inline
text element which has been bottom-aligned. This would result in the
situation shown in Figure 4-44:

IMG {vertical-align: middle;}
SUB {vertical-align: bottom;}
Figure 4-44

Figure 4-44. Combining vertical alignments

If we change the text element so that it's 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.

In the same document, you decide that any links within a warning paragraph should be green. Thus:

P.warn {color: red;}
P.warn A:link {color: green;}

Then you change your mind, deciding that warning text should be gray and that links in such text should be silver. The preceding rules need only be changed to reflect the new values:

italic or otherwise slanted." The vast majority of text in this book is upright, for instance.

That leaves only an explanation of the difference between italic and oblique text. For that, it's easiest to turn to Figure 5-24, which illustrates the differences very clearly.