Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 19th of January 2017 01:54:27 PM

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:

forced to do things like add DIVs to representcolumns.

This assumes that you wish to create columns at all, of course. Wewent to a great deal of effort to get those columns, but was itreally worth it? Multiple-column layouts can be very difficult toread on a monitor, since the user may be forced to scroll downward toread the first column, then back up to the top of the second, thendown again. Adding the columns was an interesting theoreticalexercise, but it may not be the best approach for the Web. 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.

block is the BODY element's content area,not the viewport. If you want to position elements so thatthey're placed relative to the viewport and don't scrollalong with the rest of the document, then the next section is foryou.

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 another thing to remember when you try to figure out why stylesdon't work.

In the meantime, however, here's the script:

<SCRIPT LANGUAGE="JavaScript1.2"><!--var agt = navigator.userAgent.toLowerCase(  );var is_major = parseInt(navigator.appVersion);var is_nav = ((agt.indexOf('mozilla') != -1) &&(agt.indexOf('spoofer') == -1) &&P.warn A:link {color: silver;}

Another use for color is to draw attention to certain types of text.For example, boldfaced text is already fairlyobvious, but you could give it a different color to make it stand outeven further:

B {color: maroon;}

Then you decide that you want all table cells with a class ofhighlight to contain yellow text:

blind copies. Navigator handles any one of these options; Explorer can handle all three. Here's a link to my e-mail:  so you can complain about this page.  The link encloses both the image (with default border) and the blue underlined text.  Note that I specified the text for the subject line (the sender can change this). I could also specify ?cc= or ?bcc= and list e-mails to receive copies or blind copies. Navigator handles any one of these options; Explorer can handle all three.