Specificity

to minimise time spent hunting for bugs need to understand how browser works

determines which css rules are applied and ignored by the browsers
ie. which css rules are more or less important

specificity determines which rules takes precedence

usually the reason why rules don't apply to some elements

every selector has its place in the heirachy

if 2 applied - highest wins

4 categories - inline styles, id, classes, elements

when equal - rule appears last is rule applied

unequal - more specific is applied

with more specific has greater specificity

rules stored within embedded style sheet has greater specificity

rules embedded within document have greater specificity than other rules

id selectors have higher specificity that attribute selectors

always use ids to increase specificity

any universal or inherited selected has specificity value of 0 0 0 0


p {background-color:#06C;}
p {background-color:#F00;}

#text {background-color:pink;} /* 0,1,0,0 */
body p {background-color:green;} /* 0,0,0,2 */
p {background-color:red; font-weight:bold;} /* 0,0,0,1 */
p.one, p.three {background-color:yellow;} /* 0,0,1,1 */ = class is used
html body p.one {background-color:yellow;} /* 0,0,1,3 */
html body p#text {background-color:yellow;} /* 0,1,0,3 */
/style>
/head>

body>
p class="one" id="text" style="background-color:F00">content /p> br/> /* 1,0,0,0 */
p>content /p> br/>
p class="three" id="text">content /p> br/>
pcontent /p> br/>

How is specificy calculated
calculated on the highest digit in the specificity = number of elements
if class is used - takes priority

if no conflict - rule will be applied
0=inline embedded, 0=id, 0=class, 0=element
id is preferred use for specificity