Book HomeCascading Style Sheets: The Definitive GuideSearch this book Saturday 04th of July 2015 05:17:52 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.

If, on the other hand, we're only worried about H2 elements flowing past floated elements to their right, then we'd use H2 {clear: right;}, with the result shown in Figure 7-77.
Figure 7-77

Figure 7-77. Clear to the right

Finally, there's clear:none, which allows elements to float to eitherside of an element. As with float:none, this value mostly exists to allow for normaldocument behavior, in which elements will permit floated elements toboth sides. none can be used to override otherstyles, of course, as shown in Figure 7-78. Despitethe document-wide rule that H2 elements will not

A.1.4.1. W3C CSS Validator

If you're having trouble getting your style sheets to work, it might be the result of a typographical error, or some other basic error that is difficult to diagnose. You could spend a long time combing through your styles, exhaustively checking each rule for correctness -- and that's a good exercise, of course -- but you could also have a program do it for you, and simply tell you if it found any errors. The W3C CSS Validator will do exactly that. You can supply it with the URL of a style sheet or document containing styles, or simply paste a block of styles into an input field, and let the validator tell you if your problems are the result of a misspelled color name (or something similar). The chief drawback, for most people, is the technical nature of its reporting. Unless you're already familiar with HTML and CSS, the results you get back may be somewhat confusing.

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.

the following:

.navbar {background: green; padding: 0; margin: 0 0 10px 0; width: 100%;}

Now everything should be set for the navigation bar, as we can see inFigure 11-4. All we need to do now is make sure themain display has some blank space to its left, and we're done.

Figure 11-4

Figure 11-4. The greening of the navigational bar

No doubt you already know how this will work. We create anotherdivision, this one classed as main and enclosing known as a pixel, which is a term to which we'llreturn later in the chapter.

Given the way colors are created on a monitor, it makes sense that agood way to let you set colors is to give you direct access to thosecolor levels, thereby determining your own mixture of the beams. Thismethod is a bit more complex, obviously, but the payoffs are worth itbecause you aren't limited to whichever colors have been named.

The meaning of these values is shown in Table 7-1.

Table 7-1. Values of the list-style property and their results

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 anddetail before we move on.

First, let's establish how the height of a line is determined. Aline's height (or the height of the linebox) isdetermined by the height of its constituent elements and othercontent (such as text). It's important to understand thatline-height really only applies to inline elementsand other inline content and not to block-level elements. We can seta line-height value for a block-level element, but

Figure 4-28

Figure 4-28. Changing the line-height of an inline element

Setting a line-height of 1em for the BIG element will actually cause its line-height to be the same size as the BIG text itself. This has the same effect the images did: it opens up the entire line of text enough to clearly display the elements within it. In this case, the effect is due to the increased line-height of the inline element BIG, as opposed to the intrinsic size of an image, but the effect is largely the same.