Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 01st of July 2016 09:59:44 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:

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 }
  • http://  = HyperText Transfer Protocol (conventional web pages)
  • ftp://    = File Transfer Protocol
  • gopher://  = Gopher information search
  • mailto:  = compose and send e-mail (note: no slashes)
  • A:active IMG { border: 2px solid lime }

  • Library Navigation Links

    Copyright © 2002 O'Reilly & Associates. All rights reserved.

    As you can see, the order of the actual values doesn't really matter. The following three rules will yield exactly the same border, as illustrated in Figure 7-47:

    H1 {border-bottom: 3px solid gray;}
    H2 {border-bottom: solid gray 3px;}
    H3 {border-bottom: 3px gray solid;}
    Figure 7-47

    Figure 7-47. Getting the same result in three different ways

    You can also leave out some values and have their defaults kick in, like this: parent element's text shows through the positioned element. The only way to avoid this is to set a background for the positioned element.

    Note that the boldface element in this case is positioned in relation to its parent element's content box, which defines its containing block. Without the relative positioning of the parent element, the containing block would be another element. Consider a case where the element being positioned is a child of the BODY element, e.g., a paragraph or heading

    Since we've given the "tall" text a line-height of 18px , the difference between font-size and line-height is 6 pixels. In this case, though, the half-leading of 3 pixels is added to the content area, not subtracted (since the line-height is more than the font-size). This will result in an inline box 18 pixels tall, and its top is aligned with the top of the line box. Thus Figure 8-56.

    Thus far, all we've ever been able to doin document design is repeat background images in both the horizontaland vertical directions. If we wanted some kind of"sidebar" background, it was necessary to create a veryshort, but incredibly wide, image to place in the background; afavorite size for these images is 10 pixels tall by 2,500 pixelswide. Most of that image is blank space, of course. Only the left 100or so pixels contain the "sidebar" image. The rest of theimage is basically wasted, as we can see in Figure 6-27.