Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 27th of October 2016 12:45:05 PM


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

Ofcourse, the one thing that almost every beginning web author wants toknow is, "How do I set colors on my web page?" UnderHTML, there were two choices: use one of a small number of colorswith names, like red or purple,or employ a vaguely cryptic method using hexadecimal codes. Well,both of those methods for describing colors can be found in CSS, aswell as some other methods that are only moderately complex.

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 it's emphasized or boldfaced or whatever. Of course, if you want such elements to be different colors, that's easy enough, as illustrated by Figure 6-9:

P {color: maroon;}
EM {color: #999999;}
Figure 6-9

Figure 6-9. Different colors for different elements

Thanks to the inheritability of color, it's theoretically possible to set all of the ordinary text in a document to be a color such as red by declaring BODY {color: declared in order to make a text element float successfully. Internet Explorer 4.x for Windows does.

Also, you must have the final version of Explorer 4.x for this to work -- so if you're still using a preview release, you'll need to upgrade it, which is probably a good idea anyway. (Thanks to Howard Marvel for discovering and sharing this trick.)

you've ordered things correctly, and the imported style sheetcomes after the linked style sheet, its rules will win out over therules in the linked style sheet.

Therefore, Explorer will use the styles fromimport-styles.css. Navigator, on the other hand,won't even read the styles that are supposed to be imported, soit will only have the styles from link-styles.cssavailable and will therefore use them.

Even better, you can string more than one child selector together to precisely target a given type of element. Take this, for example:

Figure 10-4

Figure 10-4. Selecting grandchildren only

The first list item in the source is silver because it's the child of an ordered list that is itself the child of a BODY. The second list item in the source is the child of an unordered list, so it can't match the rule. Finally, the third list item in the source is a child of an ordered list, but the OL element is the child of an

There are four ways to assign a width to a border: you can give it alength value such as 4px or0.1em or use one of threekeywords. These keywords arethin , medium (the defaultvalue), and thick. These keywords don'tnecessarily correspond to any particular width but are simply definedin relation to one another. According to the specification,thick is always wider thanmedium , which is in turn always wider than