Book HomeCascading Style Sheets: The Definitive GuideSearch this book Thursday 23rd of October 2014 12:05:26 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 combinations as there are colors, but we can't exactly show them here -- being stuck in grayscale as we are -- however, we'll try to give you some idea of what you can do. Here are a few ideas to get you started.

This is a simple style sheet, as shown in Figure 6-19:

BODY {color: rgb(0%,50%,0%); background-color: #CCFFCC;}
H1, H2 {color: yellow; background-color: rgb(0,51,0);}
Figure 6-19

Figure 6-19. The results of a simple style sheet

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 you aren't quite so concerned about exact matching, you can string class selectors together. This is a new feature of CSS2, and with this approach, you can match a class attribute with a value of driving directions in this way:

Again, this probably seems a bit easier to type. So why go to all the effort of using the longer notation of attribute selectors? The reason to use attribute selectors is that the .class and #ID selectors apply

When a line box must be wider than its parent's content area, perhaps due to the existence of an unusually long word, nonwrapped text such as PRE text, or another circumstance where line-wrapping cannot occur.

  • When a block-level box is wider than its parent's content area.

  • When an element's box is taller than the height explicitly set for its parent.


    Although white-space may seem like an insanely useful property, as of this writing, it isn't supported by anything except IE5 for Macintosh and preview builds of Netscape 6. Not even the ability to use nowrap for table cells is available in other browsers, despite the fact that it would seem to be a very simple behavior to support.

    have decimals, but these numbers can't.

    Of course, if you already know the percentages, there isn't much point in converting them into straight numbers. This notation is more useful for people who use programs such as Photoshop, which produce such color values, or for those who are familiar enough with the technical details of color generation to already think in terms of 0-255 values.

    Then again, such people are probably more familiar with thinking in the height of the tallest inline box in the line), so this works.Furthermore, it only affects those lines in which a hyperlinkappears. However, there is yet another alternative. Scaling the line heights

    There's an even better way to setline-height, as it turns out, and that's touse a raw number as the value of line-height. This