What Inherits in CSS

[00:00:00]
>> We will be talking about three very related CSS topics today, inheritance, specificity and the cascade. And I am gonna rip off will sentences title he does JavaScript the hard parts. We would consider this to be CSS the hard parts, these are concepts that you encounter every single time that you work with CSS.

[00:00:22]
But you've probably never studied them in detail, you've never had anyone explain them in detail and this is where a lot of the confusion comes from when working with CSS. So let's take a quick overview of what all of the three parts are and then we're going to go into talking about inheritance in detail.

[00:00:41]
So the big C and CSS it's right in the name is off is the cascade and it encompasses all three of these particular concepts. The Cascade will govern exactly how inheritance and specificity factor into what's happening in the cascade. But which is why becomes the C and CSS, but all three of these are worth studying in depth.

[00:01:06]
So first of all we have inheritance. Inheritance says that styling is applying to an element, is going to apply to all of its descendants. So if we say for example the body is gonna have a font family of Ariel all of the descendants of the body and there are basically all of them are going to have that same font family in that particular case.

[00:01:27]
We're gonna look at that in detail In a moment. Specificity has to do with the relevance of a given style to a selected portion of the page. We need to take a look at all of the styles we've written, we need to figure out which one of those is going to quote win, specificity is a part of that step.

[00:01:48]
And then finally we have the cascade which is, given that we have styles coming from our user agent, the browser style sheet. From the user sometimes people write their own style sheets because perhaps because of visual issues, they might prefer to have say a black background with white writing on every site that they visit the user can write their own style sheet.

[00:02:11]
And then we have the style sheets that we write, those are called author style sheets. The author style sheets may be coming from the external style sheet, the separate style sheet that we normally write. They may be coming from the head of the document called an embedded or an internal style sheet, or they may be coming from an inline source.

[00:02:32]
The other thing we'll factor in here is the importance of those styles, most styles are normal. And then of course we have our old friend being important which we'll find out should be used very very sparingly way more sparingly than a lot of us are using it in web development these days.

[00:02:50]
So that is the arc of what we're going to be covering. Let's get started then with Inheritance. Inheritance is exactly what it sounds like. If you think about the people who come up to you on the street and say you have your grandmother's smile. It is exactly the same kind of thing here in inheritance.

[00:03:13]
There are certain types of CSS properties, that are passed on to their descendants and there are predictable as to which ones of these there are. So, I'll give you some hints for how to take a look at that. If you're a programmer, a way to think about this is as follows.

[00:03:30]
So, here I have a tiny little bit of HTML. We're just going to have an h 1 and a paragraph. And over here I say that the body color is going to be red. What is going to be red? If we were to drop this into code pen and look at it, the h 1 and the P would both be red Because they are descendants of the body.

[00:03:52]
If I add F to this a paragraph and say that the color is blue and we were to take a look at this, our h 1 would still be red it's still inheriting that red color from the body. But the paragraph would be blue because, we have a more targeted style that is going to get to the paragraph specifically in other words that paragraph is overriding that body.

[00:04:17]
Some of that is cascade ordering you may think, because the paragraph comes later. But if we were to actually rearrange these and put the paragraph style first and the body style second, the paragraph would still be blue. And I'm gonna demonstrate a little bit more of that in just a moment.

[00:04:36]
Another way to think about this for those of you who do a lot of programming, is to think about global styling and local styling. We don't really have these concepts of global and local inside of CSS the way you do in many programming languages. But if you think about the body is where we can set global styling, generally speaking, this is where we're gonna put the styling for our Document.

[00:04:58]
And then later we'll override it on a case by case basis, that you could think of that as your local styling. Let's talk about what types of properties yo're gonna inherit and what don't inherit. Fortunately it's not really all that hard to remember, basically the things that inherit have to do with fonts.

[00:05:19]
So, all of the font properties like font family or font style or color all of those inherit. The lists inherit as we have seen previously. The types of markers that are there can be inherited by the children. We have text that can be inherited, like text transform, which take makes your letters go from lowercase to uppercase.

[00:05:44]
For example, Text alignment left right, Text Indent indenting things. We have the space properties, whether it is letter space, line, space, word space, line height, all of those are inherited. And then finally, there's a couple of odd ones, we'll take a look at visibility in detail a little bit later.

[00:06:03]
Widows and orphans, often used in print styling, where we want to be sure that we don't have one word hanging out on a line by itself, that's widows and orphans. And border-collapse, which is using tables, where we can collapse the border between the cells so we don't have a little bit of gap in between all of the cells in our table.

[00:06:23]
The things that don't inherit, basically have to do with the box model. So, margins, padding, borders, none of those inherit. The display property doesn't inherit. So, if you think about that, that does not inherit. Positioning so absolute relative fixed, positioning all that does not inherit. Floats do not inherit, backgrounds, background colors, background images, those do not inherit either.

[00:06:50]
Things that are separate and then their own special world, grid and Flex box. Because remember I have a whole course that's devoted to grid and Flex box, we have a declaration on the parent, that's where we display flex or display grid. And the children of that parent have very specific properties that go with it that are not passed on after that.

[00:07:14]
So that's kind of unique in the world. Either it inherits and and inherits forever, or it doesn't inherit, and that's that. Those can be controlled, we're gonna look at this as well. There are properties and values that can control inheritance and we're gonna take a look at that in detail momentarily.

[00:07:33]
The best place to go if you're wondering if something inherits is MDN. So if you go to MDN under their formal definition which you'll find for most properties in CSS, you'll see this little table and you just wanna look for where it says inherited. It's yes or its no.

[00:07:50]
And that will tell you whether something is inherited or not. Direct declarations are going to win over inherited styles. Now I'm gonna say this to you now and you're gonna go. Okay, that sounds great but as we're gonna demonstrate here momentarily, even if you have an incredibly specific selector that is full of IDs, it's full of classes.

[00:08:14]
It can still be beaten by a single little type selector, If those are not pointing to the actual text that needs to be styled. So we're going to go through a big demo on that and this is one of the most confusing parts of CSS. That is why that we need to think about inheritance and specificity often together and this is where I think the root of a lot of confusion in CSS comes from.

[00:08:42]
Because people don't understand, I'm throwing ideas at it, I'm throwing bang important at it. And my paragraph is still not styling the way I want. And so we're gonna re address that particular issue here today as well. So, let's start Coding then with a demonstration of how inheritance works.