Specificity 2

* There are four numbers that make up a specifity value: the first refers to inline styles, the second to IDs, the third to classes and the fourth to elements.
* Here are some example of CSS rules and their associated specificity values.
CSS RULE: p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 1
REASON: It has one element as a selector

CSS RULE: body p {background-color:red;}
SPECIFICITY VALUE: 0, 0, 0, 2
REASON: It has two elements as selector

HTML CONTENT: TAG p class="one" TAG
CSS RULE: p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: It has one class and one element as selector

HTML CONTENT: TAG p class="one" TAG
also TAG p class="two" TAG
CSS RULE: p.one, p.two {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 1
REASON: The selectors are being treated as two seperate rules

HTML CONTENT: TAG p class="one" TAG
CSS RULE: html body p.one {background-color:red;}
SPECIFICITY VALUE: 0, 0, 1, 3
REASON: It has one class and three elements as selector

HTML CONTENT: TAG p class="one" id="text" TAG
CSS RULE: #text {background-color:red;}
SPECIFICITY VALUE: 0, 1, 0, 0
REASON: It has one ID as a selector so it overrides all others

HTML CONTENT: TAG p class="one" id="text" style="background-color:red" TAG
CSS RULE: NONE
SPECIFICITY VALUE: 1, 0, 0, 0
REASON: An inline style overrides all embedded and linked CSS styles, however when trying to override specificity values it is better to try and use the ID method.