Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 19th of December 2014 09:12:57 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 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

H1 {padding: 10px 0.25em 3ex 3cm; background: silver;}H2 {padding: 0.5em 2em; background: silver;}
Figure 7-58

Figure 7-58. Uneven padding with background colors

As Figure 7-58 demonstrates, thebackground of an element extends into thepadding. As we discussed before, it also extends to the outer edge ofthe border, but the background has to go through the padding beforeit even gets to the border.

The default value of padding is 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.

the results of these styles (and remember, the dashed lines are only for illustrative purposes):

DIV#sidebar {position: absolute; top: 0; left: 0; width: 5em; height: 7em;
overflow: hidden; overflow-clip: rect(0, 6em, 9em, 0);}
Figure 9-13

Figure 9-13. Expanding the clipping region

This extends the area in which content can be seen. However, it doesn't change the flow of the content, so the only visual effect is that more content can be seen below the element. The text does not flow out to the right, because the width of its line boxes element under Navigator 4. Of the browsers that correctly positionbackground images, only four managed correct repeating, as of thiswriting: Opera 3.6 for Windows, Internet Explorer 4.5 and 5 forMacintosh, and Internet Explorer 5 for Windows.

6.2.5. Getting Attached

Okay, so we can place the origin image forwhether the foreground content of a previous line appears above the background of a succeeding line, or is overwritten by that background. Negative values are not permitted.


padding-bottomIE4 P/P IE5 P/Y NN4 B/B Op3 Y/-

This property sets the size of the bottom padding of an element, and this padding will "inherit" the element's background. Negative values are not permitted.

BODY, and from its top left corner.

Figure 6-51

Figure 6-51. The difference between starting a repeat from top left (left) and centering it (right)

Note the differences along the edges of the browser window. When the background repeats from the center, the grid is centered within the viewport, resulting in consistent "clipping" along the edges. The variations may seem subtle, but the odds are that you'll have reason to use both approaches at some point in your design career.

blank space between the content box and the borders. Altogether, itisn't a very pretty picture.

6.1.3. Special Effects

Let's return to the happier realmof how things should work. Thanks to color andbackground-color, you can create some nice