Wednesday, August 26, 2009

Specificity 1

* Specificity determines which CSS rules are applied (and which rules are ignored) by the browsers by deciding which rules are more important and which are not.
* If we understand the rules of specificity clearly then we can spend less time hunting for bugs when creating a website.
THE RULES OF SPECIFICITY
1. Specificity determines which CSS rules are applied by the browser.
2. Specificity is usually the reason why our CSS doesn't apply to some elements even though you think they should.
3. Every selector has its place in the specificity hierarchy.
4. If two selectors apply to the same element, the one with the higher specificity wins.
5. There are four distinct categories which define the specificity level of a given selector: in line styles, ids, classes and elements.
6. When selectors have EQUAL specificity values, the rule that appears last in the document is the rule that is applied.
7. When selectors have UNEQUAL specificity values, the more specific rule is applied.
8. Rules with more specific selectors have greater specificity.
9. Rules stored within an embedded style sheet have greater specificity than other rules associated with the document.
10. Rules embedded within the HTML of the document (in line styles) have greater specificity than other rules associated with the document.
11. ID selectors have higher specificity values than attribute selectors.
12. You should always try to use IDs to increase specificity.
13. Any universal selectors or inherited selectors have a specificity value of 0, 0, 0, 0.

No comments:

Post a Comment