Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 01st of September 2014 08:29:56 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 }
it a border style:

SPAN {border: 1px dashed black;}
Figure 8-45

Figure 8-45. A single-line inline element

This is the simplest case of an inline element contained by ablock-level element, no different in its way than a paragraph withtwo words in it. The only differences are that in Figure 8-45, we have a few dozen words and that mostparagraphs don't contain an explicit inline element such asSPAN.

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.

values for color that it doesn't recognize.If Navigator 4 encounters an unknown word (such asinvalidValue) somehow, through mechanisms knownonly to itself, it actually arrives at and uses a color. Itdoesn't do so randomly, exactly, but the effect is practicallythe same. For example, invalidValue comes out as adark blue, and inherit, which is a valid valueunder CSS2 but not CSS1, will come out as a really awful shade ofyellow-green. This is not correct behavior, but you'll need toremember it as you write your styles.This . Instead of upper- and lowercase letters, a small-caps font employs uppercase letters of different sizes. Thus you might see something like the following, shown in Figure 5-29:

H1 {font-variant: small-caps;}
P {font-variant: normal;}
<H1>The Uses of font-variant</H1>
<P>
The property <CODE>font-variant</CODE> is very interesting...