First time visitor? The tutorials start here.

Easily Find and Correct Errors in Your CSS

CSS Validation

Now that we’ve covered xHTML validation, let’s move on to CSS validation.

You may find this a little trickier at first, because instead of “mismatched” start and end tags, you run into things like “parse errors” and “lexical errors,” and when you run into one of these, the error is usually somewhere before the area that is pointed out to you by the validator.

Take, for example, this CSS I found on the web, which is incidentally one good reason to make your CSS more readable to the human eye…

span.username a, span.postname {color:#777777;}font-family:verdana;font-size:18px}
blockquote {border-width:1px;border-style:solid;border-color:#777777;background-color:#777777;font-family:verdana;font-size:18px;color:#FFFFFF;}
blockquote hr {display:none}
blockquote {background-color:transparent;
border: 2px inset:#FF1493;
font:bold 14px verdana;
color:#CD00CD;
}

Run the above CSS through w3c’s CSS Validator, and it gives you these errors:

1   Unknown pseudo-element or pseudo-class :verdana
1 font-family Parse Error verdana;
2   Parse Error :18px} blockquote
5 blockquote Value Error : border attempt to find a semi-colon before the property name. add it
5 blockquote Property inset doesn’t exist : #ff1493

Line 1 in the CSS says this:

span.username a, span.postname {color:#777777;}font-family:verdana;font-size:18px}

Notice that } before “font-family.” Because of that, the validator (and browsers) think font-family is a tag name and :verdana is a pseudoclass of that tag name.

Now we come to line 2, which complains about “:18px} blockquote.” What it’s really complaining about is the end of line 1, combined with the first part of line 2, which together reads:

}font-family:verdana;font-size:18px}
blockquote

It’s the same } before “font-family” which caused the line 1 errors, that is causing the line 2 error, as well. Remove that } and run the CSS through the validator again…

span.username a, span.postname {color:#777777; font-family:verdana;font-size:18px}
blockquote {border-width:1px;border-style:solid;border-color:#777777;background-color:#777777;font-family:verdana;font-size:18px;color:#FFFFFF;}
blockquote hr {display:none}
blockquote {background-color:transparent;
border: 2px inset:#FF1493;
font:bold 14px verdana;
color:#CD00CD;
}

Removing that one } just got rid of both of line 1’s errors, as well as the line 2 error, and now all we’re left with is this:

5 blockquote Value Error : border attempt to find a semi-colon before the property name. add it
5 blockquote Property inset doesn’t exist : #ff1493

Let’s take a look at line 5, shall we?

border: 2px inset:#FF1493;

The validator is expecting to see a semi-colon between “2px” and “inset”, which would end up reading as: border: 2px; inset: #FF1493;. This would explain why it thinks someone used “inset” as a property (aka attribute name).

However, the validator doesn’t know how to use deductive reasoning like a human can, so it doesn’t realize that 2px inset:#FF1493 is an attempt at border shorthand. The problem here isn’t a missing semi-colon as the validator thinks it is, but in having one too many colons.

Line 5 should actually read:

border: 2px inset #ff1493;

Take out the extra colon and run the CSS through the validator again…

span.username a, span.postname {color:#777777; font-family:verdana;font-size:18px}
blockquote {border-width:1px;border-style:solid;border-color:#777777;background-color:#777777;font-family:verdana;font-size:18px;color:#FFFFFF;}
blockquote hr {display:none}
blockquote {background-color:transparent;
border: 2px inset #FF1493;
font:bold 14px verdana;
color:#CD00CD;
}

Let me also take this opportunity to remind you that hex codes should be in all lower-case.

Also, while you can leave the semi-colon off from the last attribute value, it’s really not a good idea. When you leave that semi-colon off the end like that and then later try to add more attributes to something, it’s all too easy to forget to add that semi-colon.

Finally, you should always make your CSS easier to read than this. If I were to write that CSS, it would look something like this:

span.username a, span.postname {
    color: #777; 
    font-size: 18px;
}
blockquote {
	border: 1px solid #777;
	background: #777;
	font-size:18px;
	color: #fff;
}
blockquote hr {
        display:none;
}
blockquote {
	border: 2px inset #ff1493; 
	font-weight: bold;
	font-size: 14px;
	color: #cd00cd; 
}

Notes:

  • I left out font-family, because everything else on the page was defined to have verdana font and it will therefore inherit verdana anyway (no need to re-define it).
  • I left out the transparent background, because transparent is the default background for anything other than “body”.
  • I used shorthand for borders, as well as 3-character hex codes for any that can be shortened in this manner. For an explanation of 3-character hex codes, see the last paragraph of Hex Color Codes.

But wait, there’s more!

Lexical errors

You saw a parse error in the above example, but I haven’t shown you a lexical error yet. A lexical error is generally caused by anything that’s written specifically for Internet Explorer. More specifically, something like this:

height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');

I have not seen this cause an issue yet, but it’s good to put such IE hacks into its own style sheet, then nest the link to that style sheet into a conditional statement between <head> and </head> in your page, like so:

<link rel="stylesheet" href="/styles/style.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/styles/ie.css" media="screen" />
<![endif]-->

Finding the line number

Ok, so it says the error is on line 145, but how do you know which line that is without counting the lines manually? It’s easy with Crimson Editor, and if I’m not mistaken, with Text Wrangler, as well. Just paste the same CSS that you’re trying to validate into one of those editors, and each line should have a number beside it.

In Crimson Editor (and other Windows applications), you can also use ctrl+G and type in the line number, then hit ‘Enter’ on your keyboard.

Need help validating your style sheet?

If you are trying to validate your CSS and can’t figure out what the validator is complaining about, find the line number it’s complaining about, then copy about 5 lines before it and about 2 lines after it (include the ‘bad’ line as well, of course), and paste that CSS here.

Please don’t paste the whole style sheet. All I need are a few lines before and a couple of lines after the error, and often times not even that much.

Happy validating! 🙂

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.