Viewing Inherited and User Agent Styles3:58 with Guil Hernandez
The "Styles" pane also displays which properties are being inherited by (or passed down to) the selected element, as well as properties applied by the browser's default stylesheet (User Agent stylesheet).
As you've learned, CSS Styles can cascade down or 0:00 be applied to elements from many different places. 0:03 You've seen how the Styles pane helps you understand exactly where styles are being 0:05 declared and which properties are being overridden by other properties. 0:10 Well, the Styles pane also displays which properties are being inherited or 0:14 passed down to the selected element. 0:18 As well as properties applied by the browser's default stylesheet or 0:20 the user agent style sheet. 0:23 Select the body element. 0:26 And in the Styles pane, we see the CSS I wrote, to style the body. 0:28 For example the font-family, color and background-color styles, and 0:32 below these rules is a CSS rule inside a gray box. 0:36 Well, I didn't write the CSS, 0:39 these are styles being applied by what's called the user agent stylesheet. 0:41 This is the stylesheet supplied by the browser itself. 0:45 For example the body element is displayed as block with an 8 pixel margin 0:48 by default. 0:53 And some of these styles are often overridden by the CSS you write. 0:54 So for example, I'll add margin zero to the body rule. 0:57 And notice how the margin property in the user agent stylesheet gets crossed out. 1:03 Selecting the h2, shows that the browser by default is displaying it block, setting 1:10 its font-weight to bold and applying space around it with webkit specific margin 1:15 properties like webkit-margin-before and webkit-margin-after. 1:20 Now even though we're inspecting the h2, below the user agent rule 1:26 is an area labeled Inherited from body, that shows the body rule. 1:31 Well, this area shows that the h2 is inheriting certain properties from 1:36 the body element like font-family and 1:41 color because the h2 is a descendant of body. 1:43 So for example, if I uncheck the properties in the body rule, the font and 1:47 color changes are applied to the h2, 1:50 as well as other elements inheriting these properties. 1:53 So I'll refresh the page to bring them back. 1:56 And you'll notice that the background-color property is dimmed, 1:58 or grayed-out. 2:03 Well, background-color is a non-inheritable property, meaning 2:04 elements cannot inherit its value the way they do with font and color values. 2:09 So anytime you see dimmed or grayed-out properties in the Inherited from values, 2:13 it means that the property's not being applied to the selected element, 2:17 because it's non-inheritable. 2:21 So remember, a crossed-out property means that it's been overridden 2:23 by a more specific property. 2:28 And a dimmed or grayed-out property means something different. 2:30 It means that it's not being applied to or inherited by the selected element. 2:34 So now let's look at another example of user agent stylesheets and 2:39 inherited properties in the Styles pane. 2:42 When you select a guest list item, 2:47 you'll see that the user agent stylesheet sets its display value to list-item and 2:49 text-align to webkit-match-parent by default. 2:55 And below, we know that the li is inheriting styles from it's parent, 3:00 the invited-list ul. 3:05 Because we see the ul in the Inherited 3:06 from rule with list-style-type set to none. 3:09 Meanwhile the padding and margin properties applied to the ul are not 3:13 inheritable properties so they appear grayed out. 3:17 In other words, their values are not being passed down to the li's. 3:19 Now, the area below shows that the user agent stylesheet by default 3:23 sets a ul list-style-type value to disc. 3:28 Because list-style-type is an inheritable CSS property that gets 3:32 passed down to the selected li's. 3:35 But can you figure out why it's crossed out? 3:38 This is happening because the actual "list-style-type" value, 3:41 the li is inheriting from the ul is declared in our stylesheet on line 82. 3:46 So its overriding the user agent stylesheet, therefore its crossed out. 3:50
You need to sign up for Treehouse in order to download course files.Sign up