CSS Inheritance Demo

[00:00:00]
>> All right, so, we got a very basic web page here to start to talk about inheritance, and what we have going on here. So, always the best thing to do, any time you start to work with CSS is to take a look at the HTML. Remember CSS is all about patterns and finding patterns in the HTML.

[00:00:19]
And we may find those patterns through IDs and classes, but there's always a pattern in the HTML that we're trying to latch on to in our CSS and apply styles. So, here we have an article, it has an ID of Bob, we have an h1 for our title.

[00:00:35]
We have a paragraph that has a class of cloud, inside of that we have an image and we have some text and we have a link. In our second paragraph we have a class of tree, it has a strong in there, the strong has an ID, we have a link in there.

[00:00:49]
And then down at the bottom we have a footer for the article, the footer has a link as well and then we end our article. Okay, by the way those of you who are thinking, hey, she's using a float, isn't that kind of old school? Actually this is the reason that floats were invented.

[00:01:08]
Floats are all about taking an image. If my text was longer, it would eventually wrap around this image and continue down the page. This is why we have floats inside of CSS, what is old school is using floats for layout. So any time we were laying out whole web pages in floats, we used to do that about ten years ago because we didn't have any other options.

[00:01:29]
That is the difference between using floats in this context and using floats for layouts today. All right, so then for our CSS, we have our border box styling to start with. I've declared the body has an Arial font on it. And there's the information about the image, we have a max width of 100%.

[00:01:50]
That makes it flexible, if the window gets smaller, the image will scale down in size. We floated it right and then we put a little bit of margin on it so that the text doesn't run into it. So one of the things that you'll often see me do is this exact declaration here, I've got the body with a font family on it.

[00:02:08]
So I've never actually said that the h1 should have an Arial font to it. I never said the paragraphs had to have an Arial font to it. We just assume that they do, and perhaps you have been coding for some time, you've never really thought about the fact that you've not specifically telling each of these elements what kind of font family to have.

[00:02:30]
That is inheritance in action, it's kind of like having someone come to your house, and you say, please paint my entire house white. We don't have to say, paint the kitchen white, paint the bathroom white, paint the bedroom white. We just say, paint the house white, except for that bedroom I want it green, the wall in that bedroom I want it blue, so we can specify exceptions to that.

[00:02:52]
Likewise here we can do the same. As you have seen me demonstrate before I could say for example h1, and I could say font-family Times serif, and my h1 would change to a Times font, you may say, well, okay, Jen that's the last one here on the list.

[00:03:17]
That's why that one wins. But I'm going to take this h1 and move this up. So if we put this, I'll put it even right here at the very top of my style sheet. And Bob Ross, more Bob Ross wisdom, is still Times for its font, and the reason why is because we're very specific about the element that we're trying to style.

[00:03:40]
So here h1, we have body, article, h1, and we're specifically targeting that h1. We're overriding the body which is simply inheriting, but we're specifically calling out that h1 as the Times font, and that is why it displays that way on the page. This will be true even if I did something like this, I could say, Bob, the ID Bob, which is on the article, and here I could say something like font-family, our old friend Comic Sans.

[00:04:26]
I think I have to do Comic Sans Ms. There we go. So, my ID of Bob has got the Comic Sans font on it, and you can see here that it's overwritten the body font. And that is because, once again, although it doesn't show in code pen, remember the body element is assumed.

[00:04:53]
So I'll just type one in here for you so you can see it. Our body element was said to be Arial, article with the ID of Bob is now set to be Comic Sans but the h1 still comes later and it's showing as Times. So in this case we have an element beating an ID, so to speak, and it's due to inheritance because the inheritance is taking priority in this case over specificity, and the cascade in some cases.

[00:05:29]
And again, I've got the h1 coming later, I can put it earlier. It will still win over my ID. Okay. That's all kind of ugly, so let's just get rid of those. Then the last thing I wanna talk about here is the difference between the universal selector and the body element.

[00:05:56]
So as you know in the display part of your webpage, the body element encompasses basically all of your visible HTML. The head element is gonna encompasses your meta tags, and your titles, and all the things that are basically for machines, not necessarily for a visitor to your webpage.

[00:06:14]
In this case, the body element is the one that encompasses all that visible stuff. So oftentimes people will use, instead of body, they will use star to set their font family for all of these elements on the page. And you look at that and say, well, there's really no difference between those two, but there is.

[00:06:39]
The difference is here we are working with a property, font family, that inherits. And so between body or star there is in fact no difference, in the final result anyway. But with body, we go back to body here and I add to this a border. 1px solid red, border of course does not inherit, so what do we get?

[00:07:05]
We get a border around the body of the webpage, remember that image is floated, we haven't cleared that float. And so the float is hanging outside of the webpage right now. And I can go through how we can go about clearing that if you like, but that that is what's going on there.

[00:07:22]
So we have a single border because the border property is not inherited. If I change body to the star property, Notice that we now have all of the elements on this webpage have a border on them. So what we've done instead of saying, we're going to set the Arial font on the body element and just let inheritance work, here we are specifically declaring a font family on every single element inside of this particular webpage.

[00:07:59]
So every element gets its own special declaration for the font. Every element is now of course also getting a border as well. So that's the difference between those two. I usually prefer to let inheritance work, and so I tend to use body. While we're here for those of you who are wondering about clearing a float, we could do that.

[00:08:23]
Normally what you would do is look at, Here. We could look at the article for example as a way we could clear on the article, we could clear on the cloud paragraph, just depends on where we wanna have some of that extra space to appear. Let's say we wanna clear on the article.

[00:08:44]
I know a lot of you are fans of the overflow property, which is one way of doing this, but there's a new way to do it as well. And this is with the display flow-route property. And notice that that will clear that float for you. Now, you have that image all encompassed inside of this particular webpage.

[00:09:11]
So, I hope that helped some, in terms of clearing floats as well as a little bit of basics about inheritance. Do we have any questions so far?
>> Person said, nice, haven't used floats in a long time.
>> Yeah. [LAUGH] Okay.
>> So, what's with the colon root?

[00:09:40]
>> Colon root? Up here at the, yeah, that's a good question. Okay, so colon root, so what is root? Remember that in CSS we think of them as HTML elements. In JavaScript we think of these as nodes, right? So we have body, the body element, we have before and after the body element as things that we can access.

[00:10:05]
Root this is a pseudo class that will access the route of the body, often that is HTML, right? The HTML element, that may be outside of that if there's a node outside of that. The other thing that root does is it has the specificity of a class. So it has a higher specificity than just using a type selector like HTML or body and that may also help depending on how you're writing your CSS, for declaring your various variables.

[00:10:36]
So root, this route notation is something that's kind of evolved, it's where we're gonna put in our variables, right? So my specific red color is gonna be, whatever, ff0000. Then that is how most commonly root is used these days, it's for holding globally scoped variables in our CSS.

[00:10:59]
Let's talk about visibility none, I'm sorry, display none versus visibility hidden. Let's talk about the difference between these two. I know you are familiar with display none because it's a really popular one. If I said to my image here and I'm just going to declare this as a separate declaration, display:none ,notice what happens here.

[00:11:22]
The image disappears, the space that the image occupied goes away, and we now have a very short little bit of text that's here on the page. You probably have used display none all over the place but you may not be aware of its cousin, which is visibility. Visibility is inherited.

[00:11:42]
And it has some interesting characteristics when you use it here on the webpage. So instead of display none, if I set this to visibility, actually let me remove that. Now the image is back, visibility: hidden. My image disappears, so notice that the space that that image occupied is still there.

[00:12:07]
So that's kind of fun and different. We have that space still there and available for a different image for example. It's kind of like the difference between absolute and relative positioning, they function in the same kind of way. When we do absolute positioning and you move something on your webpage, the space that it occupied collapses, as opposed to relative positioning where you move something on the page with relative positioning, the space that it occupied remains open.

[00:12:35]
So display none and visibility hidden are similar types of properties to that. We could continue on with this just to show you. If we chose one of our paragraphs here, like the cloud, let's say that first paragraph here. Let's also make that visibility:hidden, so you can see here that our space continues to be available and for that image and for the text.

[00:13:07]
If we change the size of the image, notice that all the compensation is happening here on the screen. We're redrawing as if the image and the text were still there. So visibility hidden is inherited while display none is not. All right, and the last property that I'd like to introduce to you, while we're here, Has to do with links.

[00:13:35]
Now, I know you're really familiar with links. Normally the way that we write links these days is a' and we say something like color:red, and then we'll say something like a:hover and we'll say, Text-decoration: none, great. So when I hover over my links, the text decoration disappears, all is well.

[00:14:08]
Normally we style this way because we wanna have our unvisited link color and our visited link color the same. So A by itself encompasses all of those. But I'd like to point out that we now also have a class for this. It is called the any-link class or sorry, pseudo class, which will also style the link state and the visited link state together as a single item.

[00:14:38]
So, if you are having a specificity problem somewhere along the way where your A style by itself is getting overwritten in some way, that any-link pseudo class may also be useful to you for styling links.