Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 23rd of October 2017 02:37:20 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

H1 {padding: 10px 0.25em 3ex 3cm;} /* uneven padding */H2 {padding: 0.5em 2em;} /* values replicate to the bottom and left sides */
Figure 7-57

Figure 7-57. Uneven padding

It's a little tough to see the padding, though, so let'sadd a background color, as shown in Figure 7-58:

H1 {padding: 10px 0.25em 3ex 3cm; background: silver;}H2 {padding: 0.5em 2em; background: silver;}
Figure 7-58

Figure 7-58. Uneven padding with background colors

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 }
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.


6.1.1. Foreground Colors

The easiest way to set the foreground color of an element is with the property color.


to change the type of counter or bullet used for a list's items, you would use the list-style-type.



disc | circle | square | decimal |



baseline | sub |super | bottom |text-bottom | middle |top | text-top |<percentage>