Book HomeCascading Style Sheets: The Definitive GuideSearch this book Sunday 04th of December 2016 04:50:35 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 nearest block-level ancestor. This is true even in relative positioning, although it might not seem so at first.

  • For nonroot elements that are absolutely positioned using a position of absolute, the containing block is set to the nearest ancestor (of any kind) that has a position other than static. This happens as follows:

    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 */
    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.

    This behavior can be altered by assigning padding to the inlineelement, which will push the borders away from the text itself (shownin Figure 8-58):

    SPAN {border: 1px dashed black; padding: 4pt;}
    Figure 8-58

    Figure 8-58. Inline padding and line-box layout

    Note that this padding does not alter the actual shape of thecontent-height, and so will not affect the height of the inline boxfor this element. Adding borders to an inline element will not affect

    Figure 7-71

    Figure 7-71. Hanging float

    There is one important question here, which is this: what happens tothe document display when an element is floated out of its parentelement by using negative margins? For example, an image could befloated so far up that it intrudes into a paragraph that has alreadybeen displayed by the user agent.

    In this case, it's up to the user agent, but the CSSspecifications explicitly state that user agents are not required todon't always give you a choice anyway.

    font-style

    Values

    italic | oblique |normal

    The rest is left to our discretion.

    A lot of this is fairly straightforward. For the documentBODY, we write:

    BODY {font-family: Times,serif; color: black;background: white url(pix/grstripe.gif) repeat-y top left;}

    For the anchors, among other things, we need to know the color valueof the green being used. The art department reports that thisparticular shade of green uses no red or blue, and just 40% green;