CSS Layers

[00:00:00]
>> So that's the first thing I put around, it is that section with a class of intro, and then inside of that, I've started to add this div with a class of container. And these do two things. Once we set up the CSS to this, so give me a second here to put in those.

[00:00:24]
So the section with a class of intro, make sure you close it. And then inside of the section we'll have a div with a class of container. The purpose of this is as follows. So once again, when we take a look at our comment image here, that comment is gonna stretch all the way across our web page.

[00:00:42]
No matter how big our browser is, we're gonna have a comment stretching all the way across that particular page. But the text inside of it, we don't want the text stretching across that far. Why is that? Would you like to read sentences that go from one side to the other of this monitor?

[00:01:01]
Gosh, that would be hard to read, wouldn't it? Okay, so your eyes read text that's about this wide, okay? So we're going to use our container to make the text inside of those pages no more than this wide. But we can put our background image on the section and that will allow that background image to stretch all the way across our browser window without impacting the text inside.

[00:01:25]
Does that make sense? Sweet, so let's set that up next. We're gonna get going here with our CSS. So with that HTML in place, one of the things that I have come to start doing here as I work in CodePen is the following. If you look at how many styles we have so far, congratulations, guys, you've already written 125 lines of CSS.

[00:01:54]
It's a good day and we're only getting started. This makes reading CSS and CodePen kind of hard. So one of the structures that I have started to add here for this reason is an item called @layer, with some curly brackets that go with it. We're going to use the opening curly bracket here at the very beginning on line one @ayer, opening curly bracket, okay?

[00:02:22]
And then scroll all the way down to the end of your code, and we're gonna put in our second curly bracket. So in other words @layer is going to incorporate all of that. And we can format this, format our CSS, to indent all of that. So layer is a construct now in CSS that has to do with specificity.

[00:02:48]
We're not gonna use it in that context, we're just using this as an organizational mechanism to keep our CSS such that we can deal with it and we can hide what we need to hide. We can give this a name, so I'm going to call this base, @layer base, because this is our base styling, okay?

[00:03:09]
Once you have that in place, you'll notice that there's a little arrow, a down arrow there next to layer, if you click that. [LAUGH] Okay, so this is just for our benefit for reading this. This will just hide away all of that styling that we already wrote so that we can focus on other things.

[00:03:31]
Make sense? All right, I'm not suggesting that you use this in your regular work, if you want to you're more than welcome to, but here in CodePen, this is a really helpful way of organizing our CSS. Let's set up another one of those, @layerintro, because that's what we're doing next.

[00:03:51]
Now, before we leave the base, I'm gonna scroll all the way to the bottom of my base here, I'm gonna add a couple of styles here that I'm going to use throughout my website. One of those is the container. So remember, the container is going to set the width here, a maximum width inside of my HTML.

[00:04:12]
So we don't want our text to stretch all the way across the screen, we only want it to stretch so wide. And so here for my container, what I'm going to say is, max width 1200 pixels, okay? So in other words, hey container, never get any wider than 1200 pixels.

[00:04:33]
And just for the moment, let's add a border, 1 pixel solid red, my favorite debugging tool of all time. So that's gonna put, actually, I'm gonna make it 2 pixels. This is gonna put a big red box around our container at the moment. And if you notice, as we make this bigger, right, that red box is gonna grow and grow and grow until It gets too big and, I'm probably gonna have to zoom out a little bit here.

[00:05:06]
So at some point as I stretch across here, you see how that stops growing? That's our max width of 1200 pixels. Awesome. But now it's pushed over to the left side and I want everything, so now I want it centered too right? [LAUGH] Okay, so we can add a center to that by saying margin: 0 auto;.

[00:05:32]
Now, margin: 0 auto; helped me remember, what is the difference between padding and margin? So if I'm looking at my red border here, that's the border, where is the padding on that red border?
>> Outside of it.
>> Almost.
>> Get Inside of it. Inside of it, the padding is inside of that box.

[00:05:55]
Where is the margin? Outside of it, okay? So put padding is inside margin is outside, and when we set our margin to 0 auto, what we're saying is those two numbers are top and bottom. So on the top we're adding no margin, no margin to the top, no margin to the bottom.

[00:06:12]
Auto is cool because what it does is it takes that extra space, divides it into 2, and sticks it on the left and right sides of your box, and that will effectively center it. Okay, that's why margin: 0 auto; works so well. So this leads me to what I've always said, if you can't see it, you can't style it.

[00:06:34]
So when you're having issues in CSS, stick a border on it, so that you know where your box Boxes, right? And then from there, you can figure out what is padding, what is margin, why things aren't centered on the page. If you're trying to figure this out without that red box in place, you are going to have issues.

[00:06:50]
Make sense? Okay, and then, of course, you just pull that out. So we don't need that border. Well, actually, I'll leave it in one more minute. Because I'm also gonna add to this padding: 0 1rem. So likewise, this is not gonna add padding to the top or the bottom of the box, but it will add it to the left and the right, and that will get our text right off the edges of that box.

[00:07:16]
Make sense? Cool, let's pull out our boarder, we don't need in it anymore. Yes.
>> Is it possible to comment lines out?
>> Yes, absolutely. Yep, so a comment would look like this, /star this is a comment, star/. And just like you were suggesting, you could grab the end of that comment and put it down here, and now my container is unstyled.

[00:07:48]
>> But in terms of that border that was created and if you wanted to toggle it on and off or you just wanted to sort of leave it in there, you can definitely comment just that line.
>> Absolutely, yep. Let's see. If I put that border back in with a comment border 1 pixels solid red, there we go, that works just fine.