Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 23rd of August 2017 07:25:54 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:

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 */
line-height is set in relation to the
font-size of the element itself, not the parent

Figure 8-61

Figure 8-61. Assigning the line-height property to inline elements

It's important to keep these sorts of things in mind when you're trying to do things like add borders to an inline element. Let's say you want to put 5-pixel borders around any hyperlink:

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.

By taking the lowest common denominator approach, by being web enabled, protocol independent, network independent, platform independent and extensible, XML makes it possible for new systems and old systems (that are all different) to communicate with each other. Encoding information in plain text with tags is better than using propietary and platform dependent binary formats.


XML provides solutions for problems that have existed for the past 20 years. With most applications and software services using the Internet as a target platform for deployment, XML could not have come at a better time. With the web becoming so popular, a new paradigm of computing has emerged for which XML supplies one of the most important pieces, platform, vendor and application neutral data. Regardless of the programming language used to process XML, it will enable this new networked computing world.

Java is also a key component of this new paradigm. On the server side, by working with XML, it can more naturally integrate legacy systems and services. With XML, Java can do what it does best, work very well on the server side, and web (and Internet) enable software systems.

into table cells:

BODY {color: red;}TABLE {color: black;}

That's because the combination of your style, and thebrowser's built-in styles looks like Figure 6-10.

Figure 6-10

Figure 6-10. The result of combining author styles and browser styles

Since there is a color value defined by thebrowser for TABLE elements, it will take

As we can see from Figure 8-22, the paragraph has simply been pulled upward by its negative top margin, such that it's outside the parent DIV !

Figure 8-22

Figure 8-22. The effects of a negative top margin

With a negative bottom margin, though, it looks as though everything following the paragraph has been pulled upward. Compare the following markup to the situation shown in Figure 8-23:

Figure 8-23

Figure 8-23. The effects of a negative bottom margin