What to do when CSS stylesheets refuse to apply

There are a number of common mistakes users make when writing CSS stylesheets that are difficult to debug. Because browsers differ in how picky they are about errors, pages may look fine in some browsers but wrong in others. A common symptom of these problems is large sections of your page that seem to have no styles applied to them at all.

One mistake when writing CSS is to comment your stylesheets using the hash sign (#), which is used in many languages such as Perl and Python to denote comments. In CSS, however, it’s used as an ID selector, meaning your “comments” will be interpreted as strange CSS. The proper way to comment CSS code is to use C-style comments, which begin with /* and end with */. They do not have to begin and end on the same line, but take care not to nest comments.

Another mistake is omitting the semicolon (;) after each attribute. You don’t need semicolons after selectors or brackets, just after assigning attribute values such as border: none;. Some browsers are fine without semicolons, others are not. To be safe, always use them.

Finally, try adding the phrase !important at the end of a rule that refuses to apply, right before the semicolon. (For users of IE 6 and below, don’t bother, this keyword isn’t supported.) See the importance of !important in CSS for an explanation why.

A great resource when debugging tricky CSS problems is the W3C CSS validator: http://jigsaw.w3.org/css-validator/

Here’s another: Will the browser apply the rule(s)?