Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of January 2018 12:51:56 AM


The subject of this book is, as you might have guessed by the cover, Cascading Style Sheets (CSS). There are two "levels" to CSS; these are referred to as CSS1 and CSS2. The difference between the two is that CSS2 is all of CSS1, plus a lot more. This book attempts to cover all of CSS1, and CSS positioning, which is a part of CSS2. The rest of CSS2 is excluded because, at the time of this writing, nobody had implemented most of it. Rather than cover a lot of theoretical territory, we chose to stick to what was currently usable.

If you are a web designer or document author interested in sophisticated page styling, improved accessibility, and saving time and effort, then this book is for you. All you really need before starting the book is a decent knowledge of HTML 4.0. The better you know HTML, of course, the better prepared you'll be. You will need to know very little else in order to follow this book.

It is important to remember something about web standards and books: the former are continually evolving, while the latter are frozen in time (until the next edition comes out, anyway). In the case of HTML and CSS, there are a great many changes afoot even as these words are being written. The recent formalization of XHTML 1.0 as a full W3C Recommendation, for example, is a major milestone in the evolution of the World Wide Web. There are likely to be even more levels to CSS, further extending the ability to style documents; major web browsers are approaching full CSS1 support, and robust CSS2 implementations can be seen lurking on the horizon. This is an exciting time to be a designer, and learning CSS now will give you a leg up on the future.

0.1. Typographical Conventions

The following typographical conventions are used in this book:

Constant width

is used to indicate code examples, HTML tags and CSS elements.

Constant width italic

is used for replaceables that appear in text.


is used to introduce new terms and to indicate URLs, filenames, and pathnames.


indicates a note or tip relating to the nearby text.


indicates a warning.

Library Navigation Links

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


If a bullet's position is set to outside, it will appear the way list items always have on the Web, as you can see in Figure 7-85:

LI {list-style-position: outside;}
Figure 7-85

Figure 7-85. Placing the bullets outside list items

the image, whereas the "second" is tall enough to contain the image, its padding, and its border. This is because the totality of the replaced element (content, padding, borders) make up the inline box for the replaced element. This is what forces the line boxes to be taller in
Figure 8-66.

Margins are also contained within the line box, but they have their own wrinkle. Setting a positive margin is no mystery: it will simply make the line box taller, as in Figure 8-67.

element's background is visible. For example, look at Figure 7-5, which shows the difference between twoparagraphs without any margins, and the same two paragraphs with somemargins.

Figure 7-5

Figure 7-5. Paragraphs with, and without, margins

The simplest way to set a margin is by using the propertymargin.

Suppose wewish to set a quarter-inch margin on H1 elements,below the beginning of the document, or just far enough down to pushmuch of the background image beyond the bottom of the browser window,as shown in Figure 6-53.

Figure 6-53

Figure 6-53. The background image appears too low to be seen fully

Furthermore, even assuming that the background image is initiallyvisible, it always scrolls with the document. Perhaps you don'twant to see what Figure 6-54 depicts:

BODY {background-image: url(bigyinyang.gif);
For example, if margins are declared as percentages, the percentages
are calculated with respect to the containing block. This gives us
rule #2, which says that the containing block is usually equivalent
to the content area of an element.

Another important thing about the containing block is this: elements can be positioned outside of their containing block. This is very similar to the way in which floated elements can use negative margins to float outside of their parent's content area. It also makes it seem like the term "containing block" should really beavoid declaring a float, right? Well, first of all, the default valueof float is none. In otherwords, the value has to exist in order for normal, nonfloatingbehavior to be possible; without it, all elements would float in oneway or another.

Second, it's possible that you might want to override a certainstyle from an imported style sheet. Imagine thatyou're using a server-wide style sheet that floats images. Onone particular page, you don't want those images to float.