Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 13th of December 2017 08:00:50 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 }
absolute, but its containing block is the viewportitself. In screen media such as web browsers, the element will notmove within the browser window when the document is scrolled. Thisallows for frame-style layouts, for example. In paged media such asprintouts, a fixed element will appear in the same place on everypage. This potentially can be used to create running heads orfooters.

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.

element doesn't all fit into the specified element size. Does it get cut off at the boundaries, or does it spill outside the positioned element? That's what the next section will explore.

Should the content of an element be too much for the element's size, it will be in danger of overflowing the element itself. There are a few alternatives in such situations, and CSS lets you select between


TD {white-space: nowrap;}TT {white-space: pre;}
widthIE4 P/Y IE5 P/Y NN4 P/P Op3 Q/-

Used to setthe width of an element. This is most often applied to images, butcan be used on any block-level or replaced element. Negative valuesare not permitted.


As the last part of Figure 4-57 shows, the valuenone turns off any decoration which mightotherwise have been applied to an element. This is usually thedefault appearance for text, but not always. For example,links are usually underlined by default.If you wished to suppress the underlining ofhyperlinks, a CSS rule to do sowould be:

Figure 7-25

Figure 7-25. An inline element displayed across two lines of text with a 10-pixel margin

The left margin is applied to the beginning of the element, and theright margin to the end of it. Margins are notapplied to the right and left side of each line. Also, you can seethat if not for the margins, the line may have broken after"text" instead of after "boldfaced." This isthe only real way in which margins affect line-breaking.

To understand why, let's go back to the paper-and-plasticanalogy employed in the previous section. Think of an inline element