Why are my CSS properties being overridden/ignored?

Question

I\'m having some issues with the CSS \"hierarchy\" (not sure if it\'s proper to call it a hierarchy). I\'m trying to style the below bit of HTML.

Answer 1

Targeting ID's is more specific than targeting classes. More specific styling will overwrite less specific styling. It should be noted that in-line styling in HTML is more specific and will therefore overwrite ID-targeted styling. In other words:

...

With the CSS:

p{color:blue;}
#itemDescId{color:red;}
.item-description{color:green}

The text will appear white - not because it's closest to the html code, but because it's higher in the specificity hierarchy. If you remove the inline styling (and you normally should for cleaner more manageable code), then the text would become red. Remove the ID and it will be green. And finally it will be blue once the class is removed.

This is one of the more complex topics to understand in CSS, and I'm only scratching the surface, but the easiest description I've found on how CSS specificity works is over at CSS tricks:

http://css-tricks.com/specifics-on-css-specificity/