Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
For this video, we're going talk about a core feature of CSS called inheritance which you can see here, is we have an example file all over the author colors have been removed in the style sheet, we've taken out all the colors. And so let's just very quickly add an orange color to the body. So if we go back and hit Reload the text changes to orange. The masthead Javaco tea, of course, that's an image, so it doesn't change and the other images don't become orange but all the regular text is turned to orange, but what you just did is you set the body element to be orange, you didn't say anything about the other elements in the document and all the content here is another element. There's no text that's directly a part of the body. All the text here is actually inside of other elements which are descended from the body and we didn't say anything about them, we just said that the body should be orange, so, Why is all this other text orange, I mean other than because gosh, that's what I would expect to happen.
Computers, of course, are notoriously short on intuition, so just because you think something should happen doesn't mean that the computer automatically is going to do it. There needs to be a mechanism, in my case the mechanism is a mis-inheritance. So let's consider to the document structure. Take a look at the document tree again. What happens is that you apply in our case, the color orange to the body element and then that value for a color, propagates its way down the tree and goes to the other elements in the tree and keeps on going now propagating downwards, downwards, downwards, downwards. Spreading downward from the body, child elements inherit values from their parent elements. Now. not every property is inherited. Not every CSS property is inherited, the exceptions generally are a matter of common sense.
Things like borders, you wouldn't want a situation where you apply the border to the body and then every single element throughout the entire document suddenly got the same border. That would just be yucky. Generally speaking the properties that are inherited are the ones that it just makes sense that they would be like color, or a font weight, or font family, you know, things like that and the things that aren't inherited are the thinks that it wouldn't make sense to inherit, like borders and margins and padding in width and so on. Now, there's one thing, you might've noticed. The links are still blue, the hyperlinks have stayed blue, they're not orange.
Basically, the reason for that is that value is only inherited if there's no competition, if there's nothing to compete with the inherited value, then it applies. For example, we can take the sidebar and set its color to teal, so have a nice blue there and then if we hit Reload, the foreground of the sidebar, the text and some of the associated borders have now become teal and the reason for that is that we had two colors in effect, that's applied to the sidebar.
What you see here is that the Orange made its way down to the sidebar div, but with our new rule, we are expressly assigning a color of teal to that element, so it wins out the expressly assigned value, it wins out over the inherited value and then the new value that we've just assigned as the cyber div, that propagates its way down its subtree of the document tree basically to all the descendent elements of the sidebar div. The reason that works is because inherited values have no specificity, remember we talked about specificity earlier in the chapter. Inherited values don't have zero specificity, they have none at all.
An inherited value will always lose to a directly assigned value and the blue for the links is coming from the user agent style sheet. The browser has a built-in style effectively, that says unvisited links should be blue. So when we said body color orange, that orange color propagated its way down the document tree and then when it reaches the hyperlink, there are two conflicting values there, there's the inherent value of orange and there's the directly assigned value of blue from the browser. The directly assign value wins, because it has some associate specificity the inherited value has none at all.
The other thing about inherited values is not only do they lose their specificity, but they also lose their importance. I could say body color orange important. So that's, you know, that's really important to me that the color orange be used here. That applies when the color orange is applied to the body element, the important takes hold, but if we hit Reload here, you see there's no change because as the orange value is inherited the specificity is lost and the importance is lost, as you can see here, the links stay blue, the sidebar stays steel.
That's what happens when it comes to inheritance, oftentimes there's a bit of a misconception. People all start talking about the cascade, but what they're really talking about is inheritance, because they think well, style cascades its way down the document tree. As we've seen earlier in this chapter the cascade is actually the set of conflict resolution mechanisms that are used to determine how disparate styles are brought together and a final presentation style sheet is arrived at. The process of having one style propagate to child elements like color did here is inheritance not cascading.
Get unlimited access to all courses for just $25/month.Become a member