Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 22nd of November 2014 12:52:24 AM

Appendix A. CSS Resources


General Information
Tips, Pointers, and Other Practical Advice
Online Communities
Bug Reporting

There are a number of very good CSS-related resources available on the Web. Here are some of them.

A.1. General Information

These resources provide a good overview of what's happening in the world of CSS or otherwise provide you with a broad look at CSS.

A.1.1. CSS Recommendations

When all else fails, you can always use the source, Luke. The specifications contain, albeit in a somewhat terse and not always easily decipherable form, the complete description of how conforming user agents should handle CSS. They also contain a complete CSS parsing grammar and forward-compatible parsing rules, both of which are invaluable to the people who write user agents but of minimal interest to almost everyone else.

A.1.2. W3C CSS Activity Page

This is, officially speaking, the online center of the CSS universe. There are links to the CSS Recommendations, to new ideas under consideration, and to other sites about CSS. There are links to historical style sheet proposals, to information about current usage and implementations of CSS, and more. There are also lists of books about CSS, news of new CSS tools, and many other useful bits of information.

A.1.3. W3C CSS Test Suite

This presents a fairly complete set of pages designed to test any CSS implementation. Each page of the suite tests various aspects of CSS properties, one property per page. The tests were largely developed by the author of this book, Håkon Lie (Opera Software), and Tim Boland (NIST), with many contributions from the CSS community and even the browser vendors themselves. If you're wondering how good your browser is at handling CSS1, this is the place to find out. As of this writing, the Test Suite covers only CSS1, but a CSS2 Test Suite is expected in the near future.

A.1.4. Error Checkers

You can save a lot of time and effort simply by running your CSS through a validity checker. This is particularly recommended if you're thinking about asking for help online, because if your CSS contains errors, the first thing the experts will tell you to do is to use a validator. May as well get into the practice first.

A.1.4.2. WDG CSScheck

Similar in nature to the W3C's validator, CSScheck offers much friendlier error messages, which makes it more useful to the beginning author. In addition to indicating the severity of the error with whimsical icons (American-style traffic signals, at last check), CSScheck provides a message detailing each problem, as well as the reason it is a problem. It is possible to learn a great deal about good document authoring practices simply by running a few style sheets through CSScheck and carefully reading its responses.

Library Navigation Links

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

Simple, straightforward, and difficult to forget. It doesn't get much better than that. Here are a few more examples:

H1 {color: gray;}
H2 {color: silver;}
H3 {color: black;}

Of course, you've probably seen (and maybe even used) color names besides the ones listed earlier. For example, if you specify:

H1 {color: orange;}

Contrary to appearances, this does not technically violate therestrictions on floated elements being placed outside their parentelements. Here's the technicality that permits this behavior: aclose reading of the rules listed earlier will show that the outeredges of a floating element must be within the element'sparent. However, negative margins can place the floatedelement's content such that it effectively overlaps its ownouter edge, as detailed in Figure 8-43.

Figure 8-43

Figure 8-43. The details of floating up and left with negative margins

elements in a more general way, in order to keep them from

One way to do this is to use the em unit in conjunction with anelement whose font-size has changed. For example:

P {font-size: 14pt; line-height: 16pt;}SPAN {background: gray;}BIG {font-size: 250%; line-height: 1em; background: silver;}