The Cascade: Importance2:26 with Guil Hernandez
An important part of learning CSS is understanding how CSS rules are applied by the browser via the cascade. In CSS, the cascade is what determines which styles are assigned to an HTML element.
[MUSIC] 0:00 Now that we've explored many of the core features of CSS, it's time to take this 0:04 knowledge further by reviewing a few more important fundamental CSS concepts. 0:08 As we know, CSS stands for Cascading Style Sheets. 0:14 And we know that style sheets are the documents we use to write CSS. 0:17 But what does cascading actually mean? 0:21 An important part of learning CSS is understanding how CSS rules are applied by 0:24 the browser via what's called the cascade. 0:29 In CSS, the Cascade is what determines which styles are assigned to an element. 0:32 Without the Cascade, CSS might as well stand for Conflicting Style Sheets. 0:38 For example, if we write a rule that tells our h1 elements to be red, 0:42 [SOUND] then somewhere else we write another rule that tells them to be blue, 0:46 well, we have to two style declarations contradicting each other. 0:50 So, which one will win? 0:54 Well, that's where the Cascade helps resolve the conflict between two or 0:56 more declarations. 1:00 CSS styles can cascade down to elements from many origins. 1:01 And [SOUND] there are three main steps or sources of style information that 1:05 Cascade follows to determine which properties get assigned to an element. 1:09 Those steps are [SOUND] importance, [SOUND] specificity, [SOUND] and 1:13 source order. 1:16 So let's go over these. 1:17 [SOUND] First, importance depends on the origin of the style sheet, 1:19 which can come from different sources. 1:23 One of those sources is the [SOUND] User Agent style sheet, 1:25 which is the CSS a browser applies by default. 1:29 As we've learned in previous lessons, 1:32 each browser has its own User Agent style sheet. 1:35 Another [SOUND] source is the User [SOUND] style sheet, 1:38 which contains styles set by a user. 1:40 Users can have special styles predefined that override some of 1:43 the browser's default styles, and these are oftentimes used for accessibility for 1:46 users with special needs who may need larger font sizes, specific colors or 1:52 contrast on the page. 1:56 [SOUND] The third source is the Author style sheet, 1:58 which contains the CSS we write to style the HTML page. 2:01 So, all the CSS we've written up to this point were written in 2:05 an Author style sheet. 2:08 And by default, the CSS in an Author style sheet has 2:09 more importance than User Agent and User style sheets. 2:12 Once the Cascade decides the importance of a CSS property based on a source origin, 2:17 the next step assigns its specificity, and we'll cover that next. 2:22
You need to sign up for Treehouse in order to download course files.Sign up