1 00:00:00,330 --> 00:00:03,140 As you've learned, CSS Styles can cascade down or 2 00:00:03,140 --> 00:00:05,960 be applied to elements from many different places. 3 00:00:05,960 --> 00:00:10,810 You've seen how the Styles pane helps you understand exactly where styles are being 4 00:00:10,810 --> 00:00:14,060 declared and which properties are being overridden by other properties. 5 00:00:14,060 --> 00:00:18,210 Well, the Styles pane also displays which properties are being inherited or 6 00:00:18,210 --> 00:00:20,620 passed down to the selected element. 7 00:00:20,620 --> 00:00:23,913 As well as properties applied by the browser's default stylesheet or 8 00:00:23,913 --> 00:00:25,260 the user agent style sheet. 9 00:00:26,410 --> 00:00:28,020 Select the body element. 10 00:00:28,020 --> 00:00:32,680 And in the Styles pane, we see the CSS I wrote, to style the body. 11 00:00:32,680 --> 00:00:36,953 For example the font-family, color and background-color styles, and 12 00:00:36,953 --> 00:00:39,920 below these rules is a CSS rule inside a gray box. 13 00:00:39,920 --> 00:00:41,690 Well, I didn't write the CSS, 14 00:00:41,690 --> 00:00:45,960 these are styles being applied by what's called the user agent stylesheet. 15 00:00:45,960 --> 00:00:48,710 This is the stylesheet supplied by the browser itself. 16 00:00:48,710 --> 00:00:53,600 For example the body element is displayed as block with an 8 pixel margin 17 00:00:53,600 --> 00:00:54,460 by default. 18 00:00:54,460 --> 00:00:57,960 And some of these styles are often overridden by the CSS you write. 19 00:00:57,960 --> 00:01:02,140 So for example, I'll add margin zero to the body rule. 20 00:01:03,680 --> 00:01:08,460 And notice how the margin property in the user agent stylesheet gets crossed out. 21 00:01:10,400 --> 00:01:15,566 Selecting the h2, shows that the browser by default is displaying it block, setting 22 00:01:15,566 --> 00:01:20,451 its font-weight to bold and applying space around it with webkit specific margin 23 00:01:20,451 --> 00:01:24,862 properties like webkit-margin-before and webkit-margin-after. 24 00:01:26,012 --> 00:01:31,402 Now even though we're inspecting the h2, below the user agent rule 25 00:01:31,402 --> 00:01:36,762 is an area labeled Inherited from body, that shows the body rule. 26 00:01:36,762 --> 00:01:41,317 Well, this area shows that the h2 is inheriting certain properties from 27 00:01:41,317 --> 00:01:43,741 the body element like font-family and 28 00:01:43,741 --> 00:01:47,020 color because the h2 is a descendant of body. 29 00:01:47,020 --> 00:01:50,800 So for example, if I uncheck the properties in the body rule, the font and 30 00:01:50,800 --> 00:01:53,310 color changes are applied to the h2, 31 00:01:53,310 --> 00:01:56,210 as well as other elements inheriting these properties. 32 00:01:56,210 --> 00:01:58,767 So I'll refresh the page to bring them back. 33 00:01:58,767 --> 00:02:03,628 And you'll notice that the background-color property is dimmed, 34 00:02:03,628 --> 00:02:04,901 or grayed-out. 35 00:02:04,901 --> 00:02:09,115 Well, background-color is a non-inheritable property, meaning 36 00:02:09,115 --> 00:02:13,605 elements cannot inherit its value the way they do with font and color values. 37 00:02:13,605 --> 00:02:17,875 So anytime you see dimmed or grayed-out properties in the Inherited from values, 38 00:02:17,875 --> 00:02:21,657 it means that the property's not being applied to the selected element, 39 00:02:21,657 --> 00:02:23,501 because it's non-inheritable. 40 00:02:23,501 --> 00:02:28,325 So remember, a crossed-out property means that it's been overridden 41 00:02:28,325 --> 00:02:30,990 by a more specific property. 42 00:02:30,990 --> 00:02:34,680 And a dimmed or grayed-out property means something different. 43 00:02:34,680 --> 00:02:39,290 It means that it's not being applied to or inherited by the selected element. 44 00:02:39,290 --> 00:02:42,470 So now let's look at another example of user agent stylesheets and 45 00:02:42,470 --> 00:02:44,390 inherited properties in the Styles pane. 46 00:02:47,310 --> 00:02:49,767 When you select a guest list item, 47 00:02:49,767 --> 00:02:55,701 you'll see that the user agent stylesheet sets its display value to list-item and 48 00:02:55,701 --> 00:03:00,180 text-align to webkit-match-parent by default. 49 00:03:00,180 --> 00:03:05,050 And below, we know that the li is inheriting styles from its parent, 50 00:03:05,050 --> 00:03:06,890 the invited-list ul. 51 00:03:06,890 --> 00:03:09,990 Because we see the ul in the Inherited 52 00:03:09,990 --> 00:03:13,690 from rule with list-style-type set to none. 53 00:03:13,690 --> 00:03:17,465 Meanwhile the padding and margin properties applied to the ul are not 54 00:03:17,465 --> 00:03:19,510 inheritable properties so they appear grayed out. 55 00:03:19,510 --> 00:03:23,760 In other words, their values are not being passed down to the li's. 56 00:03:23,760 --> 00:03:28,950 Now, the area below shows that the user agent stylesheet by default 57 00:03:28,950 --> 00:03:32,492 sets a ul list-style-type value to disc. 58 00:03:32,492 --> 00:03:35,900 Because list-style-type is an inheritable CSS property that gets 59 00:03:35,900 --> 00:03:38,030 passed down to the selected li's. 60 00:03:38,030 --> 00:03:41,630 But can you figure out why it's crossed out? 61 00:03:41,630 --> 00:03:46,061 This is happening because the actual "list-style-type" value, 62 00:03:46,061 --> 00:03:50,804 the li is inheriting from the ul is declared in our stylesheet on line 82. 63 00:03:50,804 --> 00:03:55,940 So it's overriding the user agent stylesheet, therefore it's crossed out.