CSS_specificity.md

CSS Specificity

Use the information in this article to answer the following two questions. http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Question 1

How do you think the word "cascading" in "Cascading Style Sheets" relates to specificity?

Answer: Because more than one stylesheet rule could apply to a particular piece of HTML, there has to be a known way of determining which specific stylesheet rule applies to which piece of HTML. The CSS specification describes a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities (or weights) are calculated and assigned to rules, so that the results are predictable.

Question 2

Given the following HTML and CSS fragments, we expect the text in the H1 to appear green, but it shows up black. What could be the issue? Describe at least three scenarios.

 body { color: blue; }
 #main h1.alt { color: green; }
 <div id="main">
    <h1 class="alt">Page Heading</h1>
 </div>

Answer:

Scenario 1: same selector defined later

 body { color: blue; }
 #main h1.alt { color: green; }
 #main h1.alt {color: black;}

Scenario 2: more specific rule defined for wrapping div

 body { color: blue; }
 #main h1.alt { color: green; }
 /*CSS specificity: 111*/
 #container #main h1 {color: black;} 
 /* where #container is a div that wraps #main* -> CSS specificity: 210 /*

Scenario 3: black rule defined in embedded stylesheet, green rule in external stylesheet

#main h1.alt { color: green; } /* in an external stylesheet that we link to */
#main h1.alt { color: black; } /* in the embeded stylesheet */