Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 28th of June 2017 07:16:13 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. element -- given the right styles, of course.

If bottom is set to an actualvalue -- percentage or length -- then the height of thepositioned element is constrained. As a demonstration, let'sset bottom to be a specific value, with the resultshown in Figure 9-6:

top: 0; bottom: 10%; left: auto; right: 0; width: 33%; height: auto;
Figure 9-6

Figure 9-6. Defining a height by using an explicit bottom

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.

background 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 is0 (zero), and padding values cannot be negative.


Opera 3.5 allows negative padding

3. The right outer edge of a left-floating element may notbe to the right of the left outer edge of any right-floating elementto its right. The left outer edge of a right-floating element may notbe to the left of the right outer edge of any left-floating elementto its left.

This rule also prevents floated elements from overlapping each other. Let'ssay you have a BODY that is 500 pixels wide, and

BODY {background-image: url(yinyang.gif);
background-repeat: repeat-y;}

As Figure 6-29 demonstrates, the image is simply repeated along the y-axis (that is, vertically) from its starting position -- in this case, the top left corner of the browser window.

Figure 6-29

Figure 6-29. Tiling along the vertical axis

In effect, there is a repeated column in the background, and there is width: 50%; height: auto; background: silver;">...</P>

Figure 9-20

Figure 9-20. An absolutely positioned paragraph

The paragraph is now positioned at the very beginning of thedocument, half as wide as the document's width and overwritingthe first few elements!

In addition, if the document is scrolled, the paragraph will scrollright along with it. This is because the element's containingblock is the BODY element's content area,not the viewport. If you want to position elements so thatbackground-repeat.

As you might guess, repeat causes the image totile in both the horizontal and vertical directions, just asbackground images have always done in the past.repeat-x and repeat-y cause theimage to be repeated in the horizontal or vertical directions,respectively, and no-repeat prevents the imagefrom tiling in any direction.