It seems that I am always banging my head against the CSS wall screaming “What is wrong with my CSS code?” and “Why doesn’t it work?” Today I came across the blog CSSNewbie and they had a nice article on the top five reasons why CSS doesn’t work.
The basic reasons are:
- Missing bracket
- Missing semicolon
- Misspelled Class or ID
- Misspelled Properties or Value
- Bad CSS Value
Guess which one haunted me?
#1 of course!
What I didn’t know is that CSS loads until there is an error and then it stops. I had a CSS file that I linked to in the <head> section of my page and after it I had some style tags with some additional CSS definitions. I saw that half of my CSS stylesheet worked and the other half didn’t, but the commands listed after the included stylesheet worked. So I was very confused.
It turns out that the CSS stylesheet stopped loading after the parse error, so only the commands defined in the beginning worked. But when it got to the new style tags, it read those just fine.
To find the error, I used a CSS Validator.
Specifically, I went to:
W3C CSS Validation Service
and gave it the URI to my CSS stylesheet.
They found the error.