Inheritance

You might have noticed the term inheritance used for 0:00 certain CSS properties. 0:03 Inheritance in CSS means that an element's style values are copied from 0:04 its parent element. 0:08 Let's take a look at some examples. 0:10 So a good example of inheritance in a CSS property is with the color property. 0:12 If a color value is applied to an element, 0:17 any child of that element will inherit that color value. 0:19 Except for the text color in links, 0:23 since browsers assign specific color styles for those. 0:25 So for instance, notice how our title and 0:28 h1 elements share the same white color value. 0:32 So if we go back and remove the color property from each rule, so 0:37 I'm going to delete the color property from the h1 rule, 0:41 then scroll down to the title rule and delete the color property from here. 0:44 So now as we can see, the title and 0:49 heading are now inheriting the gray color value declared in the body rule. 0:53 But now, if we go back and give our main header a color property. 0:58 So right beneath background size let's type color property, and 1:04 set the color value to white. 1:09 When we save and refresh the page, notice how the title and heading 1:12 elements are now inheriting that white color value declared in the main header. 1:17 So when a CSS property is said to be inherited, 1:22 it just means that the value is determined by that inheritance from its parent. 1:25 It's part of what allows us to keep styles consistent throughout our website, 1:29 without having to repeat them in our code. 1:33 Now, CSS also has a value that we can use to sort of 1:35 break all inheritance from a paired element. 1:38 So, if we scroll down, notice the large intro paragraph in our layout, and 1:41 it's inheriting the grey text color from the body. 1:46 Now let's say we wanna change this text color back to 1:49 the browser's default color for body text, which is black. 1:52 Well, instead of going to the intro rule, and 1:56 setting a color property and defining the color value back to black. 1:59 Instead of doing that, we can also use the value initial. 2:07 So the value initial displays the value that is designated as 2:12 the property's initial value. 2:17 So the browser ignores the inheritance from the body element and 2:20 the intro's text color goes back to the initial value of black. 2:23