The Cascade: Specificity and Source Order2:32 with Guil Hernandez
Specificity is what resolves a lot of the conflict between style declarations and decides which styles are applied by the browser. The cascade also assigns a priority to CSS styles based on what order they appear.
After importance, the next step the CSS cascade follows to assign a property to 0:00 an element is specificity. 0:05 Specificity is what actually resolves a lot of the conflict between style 0:08 declarations, and it decides which styles are applied by the browser. 0:12 Earlier, in the selector stage, we learned that styles with 0:17 the most specific selectors override styles in less specific selectors. 0:20 So the browser considers each selector specificity first, 0:25 then chooses the style declarations with the highest specificity. 0:29 Take a look at this example. 0:33 Can you figure out which color property has the most specificity? 0:34 So here, all three rules set a color property, have the same importance and 0:40 origin, but id selectors have a higher specificity than class and 0:45 element selectors. 0:49 So the color of an h1 element here would be orange. 0:51 What about this next example? 0:53 What's the color of the h1? 0:58 Even though the id selector has two color declarations, 1:00 it only accepts the ones that come last. 1:03 So here, we can say that the color slategrey declaration 1:06 has the most specificity. 1:10 Okay, one more. 1:12 What's the color of the h1 in this scenario? 1:13 Did you see that sneaky inline style? 1:18 Well, since inline styles are at the lowest level of the cascade, 1:20 they have a higher specificity than id, class, or element selectors. 1:24 So, now, the color of the h1 is our new favorite color, tomato. 1:28 So, after importance and 1:32 specificity, the final step the cascade follows to determine which styles get 1:34 assigned to an element, is checking the source order of the stylesheet. 1:38 The cascade assigns a priority to CSS styles based on what order they appear. 1:43 For example, if we're linking two or more external stylesheets in the head 1:48 section of the page, the last stylesheet will take precedence over the others. 1:52 So what happens when two or more CSS properties effect the same element, 1:57 have the same importance, and selector specificity? 2:02 Well according to the cascade, 2:05 properties written later in the stylesheet will override the ones written earlier. 2:07 So to wrap things up, 2:11 the main purpose of the CSS cascade is to assign a weight to each style declaration, 2:12 after considering its importance, specificity, and source order. 2:17 And that weight determines exactly which style declarations are applied 2:21 to an element. 2:25 Once you're familiar with how the cascade works, 2:26 it can save you a lot of time troubleshooting and maintaining your CSS. 2:28
You need to sign up for Treehouse in order to download course files.Sign up