To determine which CSS style in your style sheet will outrank the others you need to calculate the “Specificity” for each of the styles based on the selectors used to target the HTML element. To calculate use the following rules:

HTML Tag Selector: 1 point ( i.e. p, div, span )
CSS Class Selector: 10 points ( i.e. class=”redText” )
HTML ID Selector: 100 points ( i.e. id=”HeaderBox” )

Example Styles:

span { color:yellow; } => has a score of 1 = 1
#HeaderBox span {color:blue;} => has a score of 100+1 = 101
#HeaderBox .redText span { color:red; } => has a score of 100+10+1 = 111

Example HTML:

This text will be yellow.