Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 24th of July 2014 03:38:31 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:

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 }

font's size. The difference between the value of line-height and the size of the font is the leading.


Percentage values are relative to the font size of the element.

In technical terms, every element in a line generates a Library Navigation Links

Copyright © 2002 O'Reilly & Associates. All rights reserved.

Now the line-height comes into play. Let'sassume the following case:

<P STYLE="font-size: 12px; line-height: 12px;">This is text, <EM>some of which is emphasized</EM>, plus other text<BR>which is <B STYLE="font-size: 24px;">boldfaced</B> and which is<BR>larger than the surrounding text.</P>

What we have here is a situation where some of the text has a

P {white-space: pre;}<P>This    paragraph   has     manyspaces        in it.</P>
Figure 4-20

Figure 4-20. Honoring the spaces in markup

With a white-space value ofpre, the browser will pay attention to extraspaces and even carriage returns. In this respect, and in thisrespect alone, any element can be made to act like aPRE element.

and the boldfaced text uses TimesBold.

5.2.1. How Weights Work

In order to understand how a useragent determines the heaviness, or weight, of a given font variant,not to mention how weight is inherited, it's easiest to startby talking about the keywords 100 through900. These numberkeywords were defined to map to a relatively common feature of fontvalue of color can also affect the borders around an element. Let's assume that you've declared these styles, which have the result shown in Figure 6-6:

P.aside {color: gray; border-style: solid;}
Figure 6-6

Figure 6-6. Border colors are taken from the content's color

This will result in the element <P CLASS="aside"> having gray text and a gray medium-width solid border. That's because the foreground color is applied to the borders by default. The basic way to override that

There is only one other value forbackground-attachment, and that's thedefault value scroll. As you'd expect, thiscauses the background to scroll along with the rest of the documentwhen viewed in a web browser, and it doesn't necessarily changethe origin image's position as the window is resized. If thedocument width is fixed (perhaps by assigning an explicit width tothe BODY element), then resizing the viewing areawon't affect the placement of the origin image.