NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,320 Hi guys and welcome back. 2 00:00:01,350 --> 00:00:04,050 In this video, let's talk about some properties that aren't 3 00:00:04,050 --> 00:00:08,489 inheritable in CSS, or at least they're not inherited by default. 4 00:00:08,879 --> 00:00:12,779 Let's see why that is and also how we can force inheritance and why 5 00:00:12,779 --> 00:00:14,489 that's usually not a good idea. 6 00:00:14,669 --> 00:00:15,300 Let's get started. 7 00:00:16,322 --> 00:00:19,801 Here, I've got a sample HTML and CSS project. 8 00:00:19,801 --> 00:00:23,282 Doesn't do very much, but it's a good project to explain the different 9 00:00:23,282 --> 00:00:26,552 things that aren't inherited by default; why that is; how we can 10 00:00:26,552 --> 00:00:27,662 change that if we want as well. 11 00:00:27,772 --> 00:00:32,122 So what we've got here is a very simple set of HTML elements. 12 00:00:32,122 --> 00:00:35,609 We've got a div that I've given a class of outer, and then inside 13 00:00:35,609 --> 00:00:38,229 it, we've got three divs that all of them have a class of inner. 14 00:00:38,636 --> 00:00:42,085 You can see here that the inner divs have a width and height set, 15 00:00:42,115 --> 00:00:43,313 so they're not totally empty. 16 00:00:43,313 --> 00:00:46,972 And obviously the outer div then has the size of all its contents, 17 00:00:46,972 --> 00:00:48,412 which is the three inner divs. 18 00:00:48,589 --> 00:00:52,409 So each inner div is one of hundred pixels wide by 50 high. 19 00:00:52,573 --> 00:00:57,403 The outer div is 150 pixels high and 100 wide. 20 00:00:57,705 --> 00:01:03,001 Notice that the divs are designed to take up the entire width of the 21 00:01:03,001 --> 00:01:05,031 page if they don't have a width set. 22 00:01:05,054 --> 00:01:09,644 So that's why the outer div here takes up the entire width of the page except 23 00:01:09,644 --> 00:01:13,581 a very small margin provided by the body and the inner div that do have a width 24 00:01:13,581 --> 00:01:16,161 set only take up the width that is there. 25 00:01:16,458 --> 00:01:20,438 So what I've done is I've set a background color for the outer div so that we can 26 00:01:20,438 --> 00:01:24,418 see the size that it spans and I've set a different background color for the inner 27 00:01:24,418 --> 00:01:26,498 divs so that we can see their size there. 28 00:01:26,528 --> 00:01:28,568 So the inner divs are red and the outer ones are grey. 29 00:01:28,821 --> 00:01:29,091 Alright. 30 00:01:29,111 --> 00:01:31,871 So that's the setup of the code that we've got here. 31 00:01:32,531 --> 00:01:36,611 Now, let me tell you a bit about why some properties are not inherited by 32 00:01:36,611 --> 00:01:39,991 default and the first type of property that isn't inherited by default 33 00:01:39,991 --> 00:01:41,821 is the layout set of properties. 34 00:01:41,851 --> 00:01:45,871 For example, margins paddings even sizes like width and height 35 00:01:45,961 --> 00:01:47,371 are not inherited by default. 36 00:01:47,574 --> 00:01:52,104 Let me show you what happens if I put a margin, let's say on the outer div. 37 00:01:52,431 --> 00:01:56,511 So I'm going to put a margin of 20 pixels and this means 20 pixels on every side. 38 00:01:56,511 --> 00:01:58,701 So top right, bottom and left. 39 00:01:59,331 --> 00:02:03,471 If I save this and I refresh the page, you can see that the outer div has become 40 00:02:03,471 --> 00:02:05,331 a bit more separated from the edges. 41 00:02:05,511 --> 00:02:06,661 That is the margin at play. 42 00:02:06,661 --> 00:02:10,841 If I select that div and I go to computed in here, then you're gonna 43 00:02:10,841 --> 00:02:12,911 see that we've got a 20 pixel margin. 44 00:02:13,233 --> 00:02:16,953 You can see though that the inner divs are still stuck to each other so 45 00:02:16,953 --> 00:02:19,233 clearly no margin has been applied. 46 00:02:19,117 --> 00:02:24,127 If we inherited the margin, then we could do margin inherit. 47 00:02:24,157 --> 00:02:26,857 This is what that would do if it was inherited by default. 48 00:02:27,277 --> 00:02:31,117 And then you can see that these elements now start to become 49 00:02:31,117 --> 00:02:32,467 more separated from each other. 50 00:02:33,352 --> 00:02:36,892 Imagine that these inner divs themselves have paragraphs inside 51 00:02:36,892 --> 00:02:39,682 them and those paragraphs had inline elements inside them. 52 00:02:39,922 --> 00:02:43,282 And all of the elements inherited the margin from the parent. 53 00:02:43,682 --> 00:02:47,892 It would quickly become very difficult to predict how these 54 00:02:47,892 --> 00:02:51,042 elements are going to be laid out if margins and paddings were inherited. 55 00:02:51,567 --> 00:02:54,027 Let's say that I add some padding here as well. 56 00:02:54,027 --> 00:02:55,587 So another 20 pixels of padding. 57 00:02:55,887 --> 00:02:56,727 I refresh the page. 58 00:02:56,877 --> 00:03:00,297 You can see that now there's a bigger gap between the content 59 00:03:00,357 --> 00:03:03,687 of the outer div and the sides. 60 00:03:03,687 --> 00:03:04,797 So that's the padding. 61 00:03:04,857 --> 00:03:06,987 It does still have the background color. 62 00:03:07,662 --> 00:03:11,472 But you can see that these elements here, the inner divs have not grown. 63 00:03:11,832 --> 00:03:16,062 If we set padding to inherit, then these elements will effectively 64 00:03:16,062 --> 00:03:18,732 grow by 20 pixels in each direction. 65 00:03:19,732 --> 00:03:23,902 Again, if these elements have other sub elements and then those have sub elements 66 00:03:23,902 --> 00:03:27,892 and so forth, this would quickly become impossible to see what was going on. 67 00:03:28,689 --> 00:03:30,509 Let me remove these here. 68 00:03:30,569 --> 00:03:32,819 And instead, what I'm going to do is I'm just going to add 10 pixels 69 00:03:32,819 --> 00:03:34,599 of padding around the outer div. 70 00:03:34,619 --> 00:03:37,889 So we can sort of see where one ends on the others start. 71 00:03:38,186 --> 00:03:41,826 Then let me tell you about border because border is another set of 72 00:03:41,826 --> 00:03:43,806 properties that don't get inherited. 73 00:03:43,806 --> 00:03:47,946 Let's say I want to set a border of 2 pixels solid red. 74 00:03:48,349 --> 00:03:50,809 If I refresh the page, you can see that we've got a thin 75 00:03:50,809 --> 00:03:52,249 border around the outer div. 76 00:03:52,609 --> 00:03:56,729 But there is no border, at least not that we can see around the inner divs. 77 00:03:56,749 --> 00:03:58,549 I'll change this to let's say black. 78 00:03:58,549 --> 00:04:00,079 So it's a bit easier to see what's going on. 79 00:04:00,479 --> 00:04:02,849 You can see there's no black border around the inner divs. 80 00:04:02,849 --> 00:04:06,719 If this was inherited, which again, we can force with the inherit keyword, 81 00:04:07,139 --> 00:04:11,669 then you can see that each of the inner div has its own border around it. 82 00:04:12,066 --> 00:04:15,666 Imagine we have paragraph elements and inline elements inside one of these 83 00:04:15,666 --> 00:04:19,716 divs, then those would each get the border and the end result would be that 84 00:04:19,746 --> 00:04:21,216 we would just see borders everywhere. 85 00:04:21,576 --> 00:04:24,576 So that's why borders are not inherited by default. 86 00:04:25,076 --> 00:04:27,086 I'm going to keep this as it is. 87 00:04:27,086 --> 00:04:30,306 I'm going to keep the padding and the inherited borders for the next 88 00:04:30,306 --> 00:04:32,886 example, which is background properties. 89 00:04:33,173 --> 00:04:35,603 When we set a background color of an element. 90 00:04:35,923 --> 00:04:41,288 Its children don't inherit them background color, or any other background properties. 91 00:04:41,588 --> 00:04:45,428 This can seem a bit confusing because if I take away the background color from the 92 00:04:45,468 --> 00:04:50,918 inner divs, you'll see that they look grey and it might prompt you to think, okay, 93 00:04:50,918 --> 00:04:55,268 clearly the background color on these divs has been inherited from the parent, 94 00:04:55,268 --> 00:04:56,948 but that's actually not true at all. 95 00:04:57,218 --> 00:04:59,138 These are by default transparent. 96 00:04:59,138 --> 00:05:01,958 And what we're seeing here is the color of the parent itself. 97 00:05:02,258 --> 00:05:05,888 You can make this a bit more obvious if we put image backgrounds in 98 00:05:05,888 --> 00:05:08,858 each of these elements and you'll see how this works a bit better. 99 00:05:08,888 --> 00:05:11,708 So what I've got here is one of our slide backgrounds. 100 00:05:11,708 --> 00:05:14,798 These wee rectangles here and I'm going to use it as a background 101 00:05:14,828 --> 00:05:16,058 instead of background color. 102 00:05:16,548 --> 00:05:20,838 So what we'll do is we'll say background is the url background.png. 103 00:05:21,235 --> 00:05:25,838 Now when I refresh the page, you can see that the outer div has the 104 00:05:25,838 --> 00:05:30,878 background set here, and these divs are essentially windows that let us look 105 00:05:30,908 --> 00:05:33,518 into the background of the outer div. 106 00:05:33,924 --> 00:05:36,864 If I set the background to inherit in here. 107 00:05:36,864 --> 00:05:38,754 And I'll zoom in a bit, just so you can see a bit better. 108 00:05:38,964 --> 00:05:43,284 You can now see that these divs are no longer windows onto the background. 109 00:05:43,344 --> 00:05:46,722 They each have their own background, which is even easier to see if 110 00:05:46,722 --> 00:05:49,182 I set background size to cover. 111 00:05:49,182 --> 00:05:53,112 That means that the image is going to be resized to match the size of the element. 112 00:05:53,629 --> 00:05:58,159 So now you can see that each one of these divs has its own image in there 113 00:05:58,399 --> 00:06:00,499 and previously they didn't have it. 114 00:06:00,499 --> 00:06:03,299 So if I remove the inherit, you can see that they are there again. 115 00:06:03,299 --> 00:06:06,889 Windows that let us see onto the background of the parent. 116 00:06:08,219 --> 00:06:11,729 One pattern you're likely seeing emerge here is that these things are 117 00:06:11,729 --> 00:06:13,559 all designed for the common use case. 118 00:06:13,709 --> 00:06:18,239 Although sometimes you may want to inherit borders or background colors and so forth. 119 00:06:18,539 --> 00:06:19,589 It's uncommon. 120 00:06:19,769 --> 00:06:23,279 So CSS is designed for the people that are going to do this the most often. 121 00:06:23,777 --> 00:06:26,957 If you're not sure where that property is going to be inherited or not just 122 00:06:26,957 --> 00:06:30,617 think about the common use cases, or just try it out with your code editor. 123 00:06:30,667 --> 00:06:33,607 You can also find the information about whether a property is inherited 124 00:06:33,607 --> 00:06:36,037 or not on the MDN documentation. 125 00:06:36,397 --> 00:06:39,277 Thank you guys for joining me in this video and I'll see you in the next one.