Book HomeCascading Style Sheets: The Definitive GuideSearch this book Friday 30th of January 2015 05:58:34 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 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

P.contain {position: relative;}

Consider the example in Figure 9-19. It shows twoparagraphs that contain identical text. However, the first paragraphcontains an inline boldface element, and the second an absolutelypositioned boldface element. In the second paragraph, the styles usedwould be something like what is shown here:

P {position: relative;}   /* establish containing blocks */<B STYLE="position: absolute; top: auto; right: 0; bottom: 0; left: auto;width: 8em; height: 4em;">...</B>


indicates a note or tip relating to the nearby text.


indicates a warning.

Library Navigation Links

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

These properties can only be applied to any element that has a display of list-item , of course, but CSS doesn't distinguish between ordered and unordered list items. Thus, you might be able to set an ordered list to use discs instead of numbers. In fact, the default value of list-style-type is disc, so you might theorize that without explicit declarations to the contrary, all lists (ordered or unordered) will use discs as the bullet forour first style:

.sidebar {background: green;}

Moving on with the sidebar, we want to get rid of all the FONT tags, and hopefully the other style tags as well (like <B> and <U>). Since the entirety of the sidebar uses the font Verdana, we can add that to our style sheet:

.sidebar {background: green; font-family: Verdana,sans-serif;}
Authority, which also approves MIME types) has approved .css as the extension for the MIME type text/css, and the slideshow mapping is not a recognized IANA MIME type.

If they still refuse to correct the problem, then you may be able to fix it yourself with a directive file in your web space. If your web server runs using an NCSA-based web server like that sold by Netscape, add the following line to a file called .htaccess (that's all, nothing more) in themargins of block-level elements are collapsed to be as large as the largest margin, whereas inline elements effectively do not take margins (they are allowed, but have no effect on page layout). Only the left and right margins of inline elements have any effect, and are not collapsed. Margins set on floated elements are not collapsed with other margins under any circumstance. Negative values are permitted, but caution is recommended.

margin-bottomIE4 P/P IE5 P/Y NN4 N/N Op3 Y/-

This sets the size of the bottom margin of an element. Negative values are permitted, but caution is at all, because the lack of a border-style in the second rule means that the default value of none will be used. As we've seen, that will turn the border off altogether. Setting borders as quickly as possible

With all of this shorthand stuff, you're probably starting to suspect that it goes even further, and you're right. We finally come to the shortest shorthand border property of all: border.