Inheritance property & Values Demo

[00:00:00]
>> So as I've just told you and as I've just demonstrated, many properties inherit automatically it's part of their DNA, it's what they do. But, we can force inheritance in some some cases as well, enforcing inheritance is done through the inherit value. So we can assign inherit to pretty much any type of property in CSS and it will inherit whatever is coming from the parent and that's the key point.

[00:00:30]
So regular inheritance goes on forever, using the inherit keyword will only go as far back as one generation so to speak only back to the parent and no father. So let's take a look at how that works as well, all right, so what we have here in our example is the same HTML that we just had from the previous example, and now I have changed nothing in that HTML, so all the IDs, all the classes and the text is all basically the same.

[00:01:00]
And we're gonna switch over to our CSS here. And some of the styling that I just showed you is still there. So here is the body image, any link hover and clearing the float, and a little bit of styling on the footer. Okay, So, let's try putting on some properties here that definitely do not inherit.

[00:01:22]
Anything having to do with Box Model typically does NOT inherit. So the border is one of those. So let's say the article has going to have a border of two pixels solid blue So there is a nice blue box around that particular webpage. As you know of course it doesn't inherit because if it did inherit we would see borders around our paragraphs and our H ones and so on and so forth, we can force this inheritance if we want to simply by saying p and then border:inherit.

[00:01:59]
So by setting it up this way, I'm now stating that all of my paragraphs should inherit that same border from their parent. And if we take a look at our HTML, you'll see there's that article. Right, that's the first big blue box around everything and then we have our paragraph for cloud, starts get tough with it, and we have our paragraph for tree, that says pretend your water.

[00:02:25]
Notice that we do have a paragraph that's down here in the footer. The footer is descended from the article. But the paragraph is not a direct descendant, paragraph is more of a grandchild relative to the article as opposed to a direct child. And the paragraph in the footer does not have a border around it.

[00:02:47]
That's because we only go back one level on that inheritance. You might be wondering how far can we push this? So here I've declared on my article that the border is going to be on all four sides, right? What if I said just, I want it only on the border bottom.

[00:03:09]
That is also legal because border bottom is a subset of that border property overall. So now I can just put in simply those borders on the bottom of those paragraphs, not necessarily on all four sides. But what if I wanted to have those borders on the bottom I wanted them to be green instead of blue, well unfortunately that is not gonna be possible.

[00:03:35]
Border bottom inherit will pull in all of the properties from the parent, but it's not going to change the color. What we'd have to do is add to this then something like border-color:green. And putting it after that border bottom inherit, means that we bring in the blue border and then we change it to the green color.

[00:04:00]
What would happen if I put this border color before the border bottom inherit, what would happen? Take a guess. Sure enough, the cascade is still in effect. So even though I said that it was green, because border bottom inherit comes later, it will be blue instead. Now inside of our paragraphs, At least those two particular paragraphs, you'll see here that I have some links.

[00:04:34]
So I have fluff this cloud and I have happy little limbs. Both of those are links. What would happen if I tried to inherit the border to those links? So if I said a { border-bottom: inherit; So now I can inherit the border-bottom underneath the links, sorry it's double underlined, but there we go.

[00:05:02]
We have those links also now have a blue border underneath of them. But if I wanted to change this, say to border top inherit, we don't inherit anything at all. That's because the parent only has a border bottom to inherit to this A. It doesn't have the full border, I would have to change this back to the full border that is being inherited, in order for border tops take effect over the links.

[00:05:34]
So basically there's some limitations as to how you can inherit properties from one particular element to another. Remember, you have to have a direct parent child relationship. If you are using a more complicated type of declaration like a border declaration where it might be on four sides, two sides, one side, whatever, the inheritance is going to be a little bit more complicated as to what's available to those children.

[00:05:59]
And if you wanna override anything that's coming from the parent, you need to make sure it comes after your inherited declaration, so that it will take priority over what comes in via its inheritance. Any questions so far? All right, so now we have taken it's properties that don't normally inherit we've used the inherit Keyword in order to force inheritance.

[00:06:24]
What about when inheritance is happening and we don't want it to happen? How can we turn off inheritance? One of the great ways to take a look at the this in detail is looking at a link in particular. So here I have, a paragraph here, it's got a font family font size, a color and a border on it.

[00:06:45]
So one of those will inherit the font family, the font size and the color. The border of course does not inherit by default. If we take a look at our hover state, when I just hover over this link, right now I haven't applied any special link styling to this.

[00:07:02]
So all of the styling is coming from the user agent or the browser stylesheet, which as you know means it's going to be blue and underlined when the link is unvisited, it's purple and underlined when the link is visited. So depending on whether you've been to the front end masters website today, that link will either show up as blue or purple inside of your browser window.

[00:07:25]
By default, there is no hover state, necessarily on that link. It looks exactly the same as whatever state your link is in now, so if you visited the link it'll be purple and underlined when you hover over it if you haven't visited the link, it'll be blue and underlined when you hover over it.

[00:07:46]
So I'm gonna style up that link now we'll start with just a simple a style and I'm going to use the key property of all, all:inherit. All right, so I'm telling the link to inherit everything from its parent so the parent is the paragraph. Notice of what's happened here, we have now the words front end masters are green and not underlined like the paragraph, it has a border around it like the paragraph and what else it's on its own line, isn't that weird?

[00:08:21]
We'll remember that paragraphs are block level elements, so they have a display block set on them whereas links are in line they have a display in lines set on them. In this case, front and masters that link has inherited the display property as well from its parent and so it is displaying as a block element.

[00:08:43]
Note that this link is indeed still a link. We can roll our mouse over it. It looks like I'm rolling my mouse over the paragraph, it looks like it's an eye bar. Instead of the cursor that looks like a finger pointer thing, as I roll over the link but it is clickable.

[00:09:00]
So when I click it, it opens up in a new window. So inherit is really serious business, it will literally inherit everything from its parent when you have the set to all inherit. Now I'd like to go into some values that you can use with any CSS property, that will control certain aspects of inheritance.

[00:09:20]
We use the generic inherit keyword before to inherit certain properties. But with these properties we are going to cancel parts of the inheritance, and the key words that we're going to use for these values are revert, initial and unset. So let's look at those in the context of this link.

[00:09:41]
Okay, so I am going to change my 'a' here and we're going to do this inheritance between the 'a' and the 'a' hover state. So, as I demonstrated before, your link when you hover over it right now really has no change to it. So I'm hovering over my link, there's no change to it.

[00:09:58]
So let's make some changes happen to it. For my a, I'm going to style it this way. I'm gonna say the font-family:courier, monospace and the color Is brown, okay? So when I roll my mouse over that link, it will continue to be brown and courier, by default. So now I'm going to start changing some of these properties on hover.

[00:10:34]
So when I go to a:hover, I'm gonna use my all property and I'm going to say initial as the value. So we are going to try to reset some things, this is going to strip away all of the styling even the styling that is coming from the users from the stylesheet of the browser the user agent.

[00:10:58]
So when I roll over this, notice what happens, it completely changes and what we wind up with, it's a little weird. I am hovered over it right there at that point with my browser. You'll see the words front and masters are roughly 1 RAM. There are Times new roman, they are not blue.

[00:11:23]
They're not underlined. They don't look any way like link. We have stripped away all of the styling from everywhere. The default browser styling is gone. All of the styling from above where I have the font family of courier and the color of brown, everything is gone, we blew it all away and all we're left with is some basic text there on the page.

[00:11:45]
So initial, the job of initial is to strip away all the styling that's being inherited from anywhere along the way. The next keyword is revert. And what revert will do is, it's kind of an undo button. So when I roll over this link with revert, you'll notice that if you have not visited the front end masters link lately, it will still be blue and underlined.

[00:12:16]
If you have visited that link lately, it'll be purple and underlined. So that is what revert is going to do. It will strip away basically what comes before it in the author stylesheet. And it will leave in place what it would have gotten from, in this case, the user agent stylesheet or the browser stylesheet and it will wind up looking that way by default.

[00:12:37]
So notice the font is gone, the color is gone. That's what happens on hover, so that is the purpose of revert. So the last one here is unset, and if we put in unset here on hover, then when I roll over the link notice what's happening here. So basically, what we've done is, the immediate parent in this case, the 'a' has set to courier monospace in a color of brown.

[00:13:05]
The paragraph is set to aerial with a color of green. Now what has happened with this unset property? When I roll over my link, we've stripped away the styling for the 'a', and we've gone back to the styling for the paragraph. In other words, we've skipped back to basically the great, kind of the grandparent, I guess.

[00:13:28]
But we've gone back to an earlier version of that styling. We've stripped away the immediate 'a' styling and gone back to the styling that is coming from the paragraph in this particular case. So that's what's happening here with the unset keyword. Finally let me just show you that I've used unset, revert and initial now with the all property on hover just to show you that you can use these with individual properties, you don't have to always use them with all.

[00:14:00]
Let me show you how that would work. So now on hover, let's just say I want the color to revert. So when I roll over my link now, revert remember is going to revert me to what is coming from the user agent stylesheet in terms of its color.

[00:14:21]
Now, we can go back to our font family revert. So this is gonna revert to again to the user agent stylesheet. So when I roll over this now it should be Arial. Sure enough, that's what happens and it will continue to be blue because that we reset the color on it.

[00:14:40]
But if I wanted to reset the font size, The font size is coming from the paragraph not from the 'a'. And so it will actually have no effect. It will stay the font size that it is, the font size is too far back, that declaration is too far back for revert to take effect here in this particular example.

[00:15:08]
Okay, so that's a little bit about the all property, the revert, initial and unset values and how you can apply them inside of your style sheet. We've just demonstrated them here on links but of course you could use it with any type of selector inside of your document.