Validate Your CSS

CSS is generally a lot easier to validate than HTML — the validator doesn’t care if your CSS is lowercase, uppercase or a bit of both and it doesn’t care about the order in which you display things (although this sometimes effects the appearance of a page, because of the cascade). There are a few things to watch out for when trying to validate though…

CSS coding is created with three sections — the selector, property and value. To validate a CSS document it must be correctly formed — the selector must come first; each property is separated from it’s value by a colon, and ended with a semi-colon. All properties with their corresponding values must be surrounded by curly brackets. Example:

Correct
selector { property: value; }

Correct
selector {
property: value;
property: value;
}

Wrong
selector property value;

Wrong
selector { property value }

The only exception to any of these rules is that the last value inside a selector’s curly brackets does not necessarily need a semi-colon at the end. However, people often forget that they’ve not added one and mess up their CSS after inserting new lines, so better to be safe and add the semi-colon after all values.

Only if your stylesheet contains valid CSS properties will it validate — so those of you who don’t know much CSS and took a guess at a few might need to check the CSS Reference Sheet before attempting to validate. Text-color and font-color are two of the classic mistakes I see which should be checked for. Watch out for proprietary code too — coloured scrollbars only work in Microsoft Internet Explorer and the CSS for these is considered invalid.

External style sheets must not contain any HTML coding — this includes <style> </style> tags which you may have copied over if your style coding was originally inline. If you need to make any comments in your stylesheet, do not use the HTML method (<!-- comment -->), CSS has its own: /* comment */.

You must offer a generic alternative to all font values — either Serif, Sans-Serif or Monospace dependant on the original font entered. This can be done like so:

font-family: Verdana, Arial, Sans-Serif;

Your stylesheet will not validate if you mix font types. Arial is Sans-Serif and Times New Roman is Serif; if you declare both of these for the same value you will be given an error. To tell the difference between each font type, look for little lines protruding from the edges of letters. If you can see lines, then you’re using a Serif font; if you can’t, the font is Sans-Serif. Example:

sans-serif / serif font example

A monospace font has the same width for character (letters, punctuation, etc). They may sometimes have lines, and sometimes not.

Here are some common examples of different fonts. If the font looks different to the font displayed on the rest of this page, you have it installed and is therefore displaying correctly.

Common Sans-Serif Fonts
Verdana, Arial, Trebuchet MS, Comic Sans MS, Tahoma, Century Gothic

Common Serif Fonts
Times New Roman, Georgia, Palatino

Common Monospace Fonts
Courier (Mac/Unix), Courier New, Lucida Console, Terminal

…and that’s it! Specify alternative fonts, remove HTML coding and ensure your style sheets are well-formed using correct CSS and you should be able to validate your CSS without a problem.

Speak Your Mind

*