The Cascade: Importance

[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