Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 20th of December 2014 08:14:05 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:

 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 }
H2 {color: rgb(50%,50%,50%);}       /*medium gray*/
H3 {color: rgb(25%,66%,40%);}

The general syntax of this type of color value is:

rgb(color)

where color is one of two ways to specify the color. The first way is to use percentages, and the second, which uses numbers, is discussed later in this section.

Perhaps you want your H1 elements to be colored a shade of red somewhere between the values for red and maroon. 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.

on the available display region and other factors. Under CSS, of course, you can assert more direct control over the way elements are sized and displayed. There are different effects to consider for horizontal and vertical layout, so we'll tackle them separately.

8.2.1. Vertical Formatting

Vertical formatting is much easier to cover, so let's do that first. A good deal of this wasUL UL, so the value ofsquare won't be inherited after all. Yourbrowser may vary.

In the case of ordered lists, CSS2 goes a great dealfurther than CSS1 to provide control over the ordering. For example,there is no way in CSS1 to automatically create subsection counterssuch as "2.1" or "7.1.3." This can, however,be done under CSS2 and is briefly discussed in Chapter 10, "CSS2: A Look Ahead".following styles defined:

UL {list-style-type: disc;}
UL UL {list-style-type: circle;}
UL UL UL {list-style-type: square;}

If this is so, and it's likely that it will be, you will have to declare your own styles to overcome the UA's styles. Inheritance won't be enough in such a case.

PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}A:link {color: blue; background-color: yellow;}A:visited {color: navy; background-color: white;}
Figure 6-20

Figure 6-20. The results of a more sophisticated style sheet

This is but the tiniest beginning of what's possible, ofcourse. By all means, try some examples of your own!

6.1.4. Good Practices