12.1. Validating Your CSS
I recommend validating all your external style sheets and all your HTML pages that use internal style sheets as well. It's easy to do and it's free. If you submit a page (or multiple pages) to the W3C's CSS validation service and they pass, you can put a nifty little icon like the one in Figure 12-1 on your page.
Figure 12-1. Valid CSS Badge
To submit a style sheet or HTML page for validation, just go to http://jigsaw.w3.org/css-validator/. The page you'll see looks like Figure 12-2.
Figure 12-2. Main Page of W3C's CSS Validator
Scroll down this page, if necessary, and decide whether you want to download the validator to your system, submit the URL for the page or style sheet you want validated, or upload a page to the W3C site for validation. Most of the time, I just use the URL validator. Clicking on that link brings you to the page shown in Figure 12-3.
Figure 12-3. URL Validation Page of W3C's CSS Validator
Simply type the URL of the page you want checked into the box, select the appropriate settings in the two popup menus on the form (I discuss these below), and submit the URL for validation. You can submit a page that contains any or all of the types of style information: linked, embedded and/or inline. The validator will load and check any externally-linked style sheets, in addition to looking over the CSS contained within the HTML document itself. You can also submit a CSS style sheet document for validation.
The validation form contains two popup menus. The first, labeled "Warnings", determines how significant a mistake must be before the validator lists it in the litany of warnings it produces as part of its report. It has four options:
all
normal report (the default)
most important
no warnings
Warnings are not the same as errors. If your page has CSS errors in it, it won't validate. But it's possible for a page to validate and still contain markup that is either deprecated or used in inadvisable ways. For example, the CSS validator warns you if you set the color of text and background elements within a block to the same color. This doesn't make the CSS wrong, but it can have an undesirable effect when the page is rendered.
By default, this popup is set to "Normal report" and unless you have some experience or a specific reason to believe that level of warning won't serve your needs, I recommend leaving it at its default value.
The second popup menu on the page is labeled "Profile". This setting determines the CSS recommendation against which your page will be validated. It has four choices:
no special profile
CSS version 1
CSS version 2
mobile
Those options are self-explanatory. By default, the validator sets the profile to CSS2.
When you have set these two popup menus to reflect the options you require, submit the URL for validation. After a brief pause, the validator will let you know that your page contains valid CSS (in which case it provides you with a link to the badge in Figure 12-1, to make it easy to put the graphic on your page). Alternatively, it will tell you what to fix in order to make your page's CSS valid.
It's important to note that to validate the CSS on your page, the validator must be working with a correct HTML page. Specifically, what is called the "document parse tree" must be valid, or the CSS validator will not be able to work as it should.
On the CSS validation page, you'll see a note to this effect and a link to the main W3C validation page, where you can submit the page for HTML validation prior to using the CSS validator. Note that "valid" HTML requires the inclusion of all of the document prologue elements, including DOCTYPE and a character encoding label. If your page lacks either of these, you'll be told that the validator cannot proceed until these points are fixed.
While I find the W3C's HTML and CSS validators to be perfectly adequate, I know Webmasters and Web designers who suggest that the validators maintained by The Web Design Group (WDG) are more stringent and informative.
The WDG's CSSCheck validator does a very decent job of CSS validation. It differs from the W3C validator in two interesting ways.
First, CSSCheck validates only external style sheets. The link you provide must be to a file with a .css extension. Second, CSSCheck will allow you to copy and paste CSS markup into an editing area on its page, and validate that segment. This can be useful during complex CSS markup tasks, when you just want to make sure you have the syntax of something right.
Obviously, there's nothing to prevent you from using both services. That might be a bit like wearing suspenders and a belt, but nobody will try to stop you if that's your style!