Book HomeCascading Style Sheets: The Definitive GuideSearch this book Monday 05th of October 2015 03:22:45 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.

list-item element. The exact behavior in this circumstance is notdefined in CSS.

list-style-typeIE4 Y/Y IE5 Y/Y NN4 Y/P Op3 Y/-

This is used to declare the type ofbullet numbering system to be used in either an unordered or orderedlist, depending on the value specified. This property applies toelements with a display value oflist-item.


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.

Comparedto the other aspects of borders, setting the color is pretty easy. InCSS1, there is the single property border-color,which can accept up to four color values at one time.

If there are less than four values,value replicationtakes effect. So if you want H1 elements to havethin, black top and bottom borders with thick, gray side borders, andwould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;width: 8em; height: 4em;">...</B>
Figure 9-19

Figure 9-19. The effects of absolute positioning

For the most part, the text in both paragraphs looks fairly normal.In the second one, however, the place where the boldface elementwould have appeared is simply closed up, and the positioned textoverlaps the some of the content. There is no way to avoid this,

Before we get there, however, there are a few more things to cover. Remember that absolutely positioned boxes can have backgrounds, margins, borders, and padding; styles can be applied within them, just as with any other element. This can make them very useful for the creation of sidebars, "sticky notes," and other such effects. One example is the ability to set a "change marker" on any paragraph that has been edited. This could be done using the following styles and markup: according to the location of the bottom of the DIV. As we can see, the end of the DIV is actually above the visual bottom of its child paragraph. The next element after the DIV is the appropriate distance from the bottom of the DIV. The fact that it overlaps the paragraph doesn't matter, at least not technically.

Now let's consider an example where the margins of a list item, an unordered list, and a heading are all collapsed. In this case, thethe following analogy. Imagine that each element, such as aparagraph, is a small piece of paper with the content of the elementwritten on it. Around each piece of paper is some amount of clearplastic; this plastic represents the margins. The first piece ofpaper (say an H1 piece) is laid down on the canvas(browser window). The second (a paragraph) is laid below it and thenslid up until the edge of one of the piece's plastic touchesthe edge of the other's content. If the first piece of paperhas half an inch of plastic along its bottom edge, and the second hasa third of an inch along its top, then when they slide together, the