NOTE This file was generated by Descript 1 00:00:00,000 --> 00:00:01,409 Hi guys, and welcome back. 2 00:00:01,440 --> 00:00:04,529 In this video, let's talk about inheritance in CSS. 3 00:00:04,680 --> 00:00:08,130 Inheritance is super important because it allows us to write less 4 00:00:08,130 --> 00:00:10,740 code and write simpler code as well. 5 00:00:11,190 --> 00:00:14,129 Simpler and easier to maintain code is not the only benefit. 6 00:00:14,370 --> 00:00:17,880 By reducing the size of our stylesheets by using inheritance. 7 00:00:18,120 --> 00:00:20,490 Our pages are also going to load faster because there'll 8 00:00:20,490 --> 00:00:22,560 be less CSS code to download. 9 00:00:22,950 --> 00:00:26,790 Let's get started and take a look at how inheritance works in CSS. 10 00:00:27,979 --> 00:00:31,399 The most important thing is that inheritance in CSS is a feature 11 00:00:31,399 --> 00:00:36,379 that determines what happens to the value of a property when no 12 00:00:36,379 --> 00:00:39,259 value is already set on an element. 13 00:00:39,313 --> 00:00:42,223 So let's take a look at this example that we've got here. 14 00:00:42,733 --> 00:00:46,543 We have some HTML boilerplate and we've got to use single style sheet linked. 15 00:00:46,543 --> 00:00:48,613 So let me create that real quick. 16 00:00:48,863 --> 00:00:52,703 And now let's go ahead and open our developer tools on this page. 17 00:00:52,733 --> 00:00:56,453 Again, I'm going to right click and copy the path and take it over to my browser. 18 00:00:56,453 --> 00:00:57,563 This is what that looks like. 19 00:00:57,593 --> 00:01:01,393 Let me just open that and we can see what we've got here. 20 00:01:01,626 --> 00:01:04,536 So I've opened the developer tools here in this page. 21 00:01:04,776 --> 00:01:07,686 And now you can see that there are a few default styles 22 00:01:07,716 --> 00:01:09,336 being applied by the browser. 23 00:01:09,936 --> 00:01:13,836 For example, in this paragraph, the display set to block, and you've 24 00:01:13,836 --> 00:01:16,266 got some various margin properties. 25 00:01:16,266 --> 00:01:20,916 One thing which isn't sent on the paragraph element is the text color, 26 00:01:20,916 --> 00:01:22,746 but you can see that it is black. 27 00:01:22,746 --> 00:01:26,526 So let's take a look at how we can change the text color of this paragraph 28 00:01:26,526 --> 00:01:29,556 without directly targeting the paragraph. 29 00:01:29,556 --> 00:01:34,026 I'm going to now close this sidebar here and go over to styles.css and 30 00:01:34,026 --> 00:01:36,756 what I'm going to do is I'm going to target the container element. 31 00:01:36,756 --> 00:01:40,746 So I'll do .container {color: orangered;}. 32 00:01:40,840 --> 00:01:42,850 This is one of the CSS named colors. 33 00:01:42,930 --> 00:01:44,520 So I've saved that refresh. 34 00:01:44,571 --> 00:01:47,621 And now you can see that the text is colored orangered. 35 00:01:47,621 --> 00:01:49,091 Whatever that color means. 36 00:01:49,091 --> 00:01:51,461 There's also something really interesting happening in our developer 37 00:01:51,461 --> 00:01:53,471 tools, particularly down here. 38 00:01:53,501 --> 00:01:55,961 Let me just zoom in so we can see it a little bit better. 39 00:01:55,961 --> 00:02:00,671 We've got the paragraph style declarations here, and you can see the are unchanged. 40 00:02:00,671 --> 00:02:04,031 Instead it's inherited the color from the container, which is 41 00:02:04,031 --> 00:02:06,091 this div with a container class. 42 00:02:06,091 --> 00:02:11,161 The style was inherited because the color property is an inherited property. 43 00:02:11,521 --> 00:02:15,601 And the paragraph element didn't already have an existing definition 44 00:02:15,601 --> 00:02:20,311 for that property. Note that not every property is inherited by default, some 45 00:02:20,311 --> 00:02:24,361 properties don't inherit, and it doesn't make sense for them to be inheritable. 46 00:02:24,361 --> 00:02:26,941 And we're going to be looking at some examples in the next lecture. 47 00:02:27,008 --> 00:02:30,518 You can find out whether a property is inheritable or not, by going to the 48 00:02:30,518 --> 00:02:33,278 documentation page for them in the MDN. 49 00:02:33,278 --> 00:02:36,908 Note that if we go over to the style and the set a color for the 50 00:02:36,908 --> 00:02:41,978 paragraph specifically, then this will override the inherited value. 51 00:02:41,978 --> 00:02:45,158 So you can see that now this one has this strikethrough because it is 52 00:02:45,158 --> 00:02:47,858 being overridden by this one here. 53 00:02:47,858 --> 00:02:52,328 Sometimes we want an element to inherit styles from a parent container, but the 54 00:02:52,328 --> 00:02:56,438 child element already has a default value for the property we want to inherit. 55 00:02:56,438 --> 00:02:57,248 I'll give you an example. 56 00:02:57,278 --> 00:03:01,365 Let's say we go over to index.html, and here in our paragraph, we add 57 00:03:01,365 --> 00:03:03,951 an a element, we put a href in here. 58 00:03:03,951 --> 00:03:05,651 We go to udemy.com. 59 00:03:05,651 --> 00:03:08,561 And we put the closing tag after the simple word. 60 00:03:08,591 --> 00:03:11,801 So now I'm going to save that and refresh this here, and we're going 61 00:03:11,801 --> 00:03:15,771 to go over to styles.css and change the paragraph color to orangered. 62 00:03:15,811 --> 00:03:16,591 So it's a little bit easier. 63 00:03:16,591 --> 00:03:17,161 What's going on. 64 00:03:17,171 --> 00:03:19,261 I'm going to get rid of this container color there. 65 00:03:19,761 --> 00:03:23,091 So now I'm going to refresh and you can see that we've got the text being 66 00:03:23,091 --> 00:03:28,791 orangered, but the a element or the anchor element has its default color. 67 00:03:29,151 --> 00:03:34,161 That is because the anchor element did not inherit the color from the 68 00:03:34,161 --> 00:03:38,735 paragraph parent, because it already has a color set in it as defined 69 00:03:38,735 --> 00:03:40,415 here by default, by my browser. 70 00:03:40,415 --> 00:03:44,825 So the a element is not going to inherit by default, but we can use the 71 00:03:44,825 --> 00:03:49,625 inherit keyword to make it inherit to the color from the parent, even though 72 00:03:49,625 --> 00:03:51,665 it already has one set by default. 73 00:03:51,665 --> 00:03:55,535 So if we write that and save, now you can see that it is orange as well. 74 00:03:55,884 --> 00:03:59,664 So at this point, you're probably wondering why not just set the value of 75 00:03:59,664 --> 00:04:01,554 the color to the same as the parents. 76 00:04:01,584 --> 00:04:03,534 Why not do orangered here? 77 00:04:04,034 --> 00:04:05,564 Well, there's a couple of reasons. 78 00:04:05,664 --> 00:04:06,144 First. 79 00:04:06,264 --> 00:04:08,694 It makes it easier to change our style sheets. 80 00:04:08,754 --> 00:04:11,514 If we decide we want to change the color of all the texts in the 81 00:04:11,514 --> 00:04:14,544 container, we don't have to remember to go and change it in two places. 82 00:04:14,604 --> 00:04:16,044 So that's one positive. 83 00:04:16,494 --> 00:04:19,734 The second one is that if you have different anchor elements in 84 00:04:19,734 --> 00:04:22,764 different paragraphs and the different paragraphs have different colors. 85 00:04:22,807 --> 00:04:26,587 You want the anchor element to have the same color as the paragraph, so you 86 00:04:26,587 --> 00:04:30,457 can use inherit in order to make sure that happens across all paragraphs. 87 00:04:30,587 --> 00:04:35,087 And finally the color of the containers can change in response to some trigger. 88 00:04:35,237 --> 00:04:38,027 For example, let's say that you want the paragraph color to 89 00:04:38,027 --> 00:04:39,227 change when you hover over it. 90 00:04:39,334 --> 00:04:42,394 If you use inherit, then the a would change as well. 91 00:04:42,604 --> 00:04:47,584 But if you set it to orangered, then the a would not change when you hover over it. 92 00:04:47,694 --> 00:04:50,604 So if you want the color to always match that of the parent, 93 00:04:50,664 --> 00:04:52,524 then you want to use inherit. 94 00:04:52,524 --> 00:04:56,334 An important note at this point is we've used this example with an a tag 95 00:04:56,544 --> 00:05:00,594 inside the paragraph and changing the color of the a, this is generally not 96 00:05:00,594 --> 00:05:01,674 something you're going to want to do. 97 00:05:01,764 --> 00:05:05,634 The anchor elements are usually a shade of blue on purpose to make them 98 00:05:05,634 --> 00:05:08,874 stand out so just keep usability in mind when you're changing your colors. 99 00:05:09,294 --> 00:05:11,934 We don't normally want to make the a elements the same color 100 00:05:11,964 --> 00:05:13,494 as a text that they're in. 101 00:05:14,494 --> 00:05:18,514 A final note, we can use the inherit key word for any properties, regardless 102 00:05:18,544 --> 00:05:22,114 of whether or not that property is an inherited property by default. 103 00:05:22,354 --> 00:05:25,054 So you can use it to force inheritance on properties that 104 00:05:25,054 --> 00:05:26,674 would normally not be inherited. 105 00:05:26,854 --> 00:05:29,074 That's going to make more sense as we go through this section. 106 00:05:29,987 --> 00:05:31,847 All I Thank you guys for joining me in this video. 107 00:05:32,027 --> 00:05:34,187 I hope that's been useful and interesting. 108 00:05:34,367 --> 00:05:39,277 Inheritance in CSS is really powerful and really useful if you know how it works. 109 00:05:39,307 --> 00:05:40,507 So hopefully that helps. 110 00:05:40,664 --> 00:05:41,384 Thanks for joining me. 111 00:05:41,414 --> 00:05:42,734 And I'll see you in the next one.