Book HomeCascading Style Sheets: The Definitive GuideSearch this book Wednesday 28th of June 2017 07:19:21 AM

Appendix A. CSS Resources

Contents:

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

http://www.w3.org/TR/REC-CSS1

http://www.w3.org/TR/REC-CSS2

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

http://www.w3.org/Style/CSS

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

http://www.w3.org/Style/CSS/Test/

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.1. W3C CSS Validator

http://jigsaw.w3.org/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

http://www.htmlhelp.com/tools/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.

However, the exact widths are not defined, so one user agent could set them to be equivalent to 5px , 3px , and 2px , while another sets them to be 3px , 2px , and 1px . Whatever width the user agent uses for each keyword, it will be the same throughout the document, regardless of the circumstances. If medium is the same as 2px , then a medium-width border will always be two pixels wide, whether the border surrounds an



Library Navigation Links

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

And Feel. Annoyed but undaunted, our intrepid websmiths forge ahead. Their mission is to take what's there, then rip it apart and put it all back together again without anyone noticing the difference. (For the purposes of this project, the part of the webmasters will be played by you, the reader.)

The most complicated screen in the system is the record display screen. Composed of three areas -- the system navigation bar, a sidebar with current options, and the record display itself -- it'svalue given, then it's copied to all the others.

This simple mechanism allows authors to supply only as many values asnecessary, as shown here:

The only drawback to this ability is a small one, but you'rebound to run into it eventually. Suppose you want to set the top andleft margins for H1 elements to be 10 pixels, andthe bottom and right margins to be 20 pixels. In that case, you haveto write the following:how it should work in theory.

Figure 4-57. Various kinds of text decoration

WARNING

It's impossible to show the effect of blink in print, of course, but it's easy enough to imagine. User agents are not required to support blink, incidentally, and only Navigator 4.x actually supports it as of this writing. headings, including document titles, are to use a sans serif font.The rest is left to our discretion.

A lot of this is fairly straightforward. For the documentBODY, we write:

BODY {font-family: Times,serif; color: black;background: white url(pix/grstripe.gif) repeat-y top left;}

For the anchors, among other things, we need to know the color valueof the green being used. The art department reports that thisany value of height other thanauto if an element is not a replaced element suchas an image. UnderCSS2, it is possible to set up asituation where scrollbars would be applied to an element such as aparagraph.

It's also possible to set the top and bottom margins of ablock-level element to be auto. If either of these