Styling Page Sections

[00:00:00]
>> All right, so let's start at the top here. Navigation bar looks pretty good. It looks like we've got our responsive elements there in place. And it's centering as the page gets wider, right? Because on the navigation bar, we set a max width of 1200 pixels and we told it to center on the page.

[00:00:20]
So that is exactly what that nav bar is doing. Maybe we should follow suit with our introduction here. So our introduction doesn't have any gating on it. If my screen was this big, that introduction would stretch across the full screen real estate. So maybe what we ought to do for the introduction is we should add that max width to it, that might be something to do.

[00:00:44]
The other things that are missing, down here in the contact me section, we had that as that purple color. And of course, we're missing that here on the page. So we'll need to think about that. And we're also missing some of the little gradient lines that go in between in the design.

[00:01:02]
Here in the design, we need to reevaluate these spaces here, when we're missing these lovely gradient lines. They're here we're gonna talk through how to make those. The projects part of this of course, is the last part that we'll work on and we're gonna still need to build that part of it.

[00:01:19]
So we still have these gradient lines and we have a button here we need to put in, right? So that's pretty much our punch list here as we think through this. Okay, so let's work on that introduction here first. So what I'm going to do here in my style sheet, is I'm going to scroll on down to my introduction styles.

[00:01:41]
So that's red down around line 57 or so, somewhere around in there in your style sheet. And I'm gonna add to this a little bit. So I've got by right now a padding bottom of 10rem. So that's giving me a gap between the end of the introduction and the start of the next section which is that contact section.

[00:02:04]
I'm gonna change this up a little bit here. So what I'm gonna do is I'm going to set padding overall to 4rem, remember that's the top, 1rem, 10rem, and 1rem. So remember, four numbers like that, when you see it associated with something like padding or margin, those four numbers being a top, right, bottom, left, TRBL.

[00:02:34]
Remember that and stay out of trouble. TRBL, trouble. So that's what those four numbers mean. So you can think about it as the hands of a clock, top, right, bottom, left, if you're more of a visual person. So think about the hands of an analog clock. So we've got some padding on the top, a bit on the top to separate us from the nav bar.

[00:02:59]
We'll put a little bit on the sides, so that at smaller screen dimensions, we don't smash into the sides of the window. And then we'll have a big space of padding going down into our next section. Then after that, I'm going to add a max width of 1200 pixels.

[00:03:18]
And we can say margin, 0 auto. So that'll center our introduction on the screen. So if we come on down here now and refresh the page, that looks so much better, doesn't it? Now we have a very clear left alignment going on here from my nav bar all the way down to my introduction.

[00:03:44]
So that was just one little bit of a tweak. We added a max width, we centered it on the page, and we swapped up our padding a little bit to make this nice and spacious. All right, next, let's take a look at this contact section here. It has the wrong background color, and we need to add a button for the email link.

[00:04:04]
So let's do that next. So scroll down here to the contact section of the page. And what I'm going to do here, I need to make this a background color of plum. So one of the things you might think of doing is here at the contact portion of this page, we would simply say, background-color.

[00:04:32]
And we'd say var--plum, right? Makes sense? So if you do that, and then take a look at the webpage. Unfortunately that gives you a big purple square in the middle of the screen. And you'd probably really prefer to have the purple stretching all the way across. So if you know why this happens, then you know how to fix the problem.

[00:05:00]
So why did this happen? This happened because we have a width set of 400 pixels on this and our background color, the purple is occupying those 400 pixels. It's not programmed to stretch all the way across the screen. So how do we get it then to stretch all the way across the screen while preserving our 400 pixels wide?

[00:05:24]
We're gonna need to add a div, okay? So that's what happens there. So here inside of my HTML down here in the contact section, rather than leaving it like this, what I'm going to do is add a div. And I'm gonna give it a class of section-plum. Because it's the plum background color for the section.

[00:05:50]
I'm real creative that way. And then down here at the end of that section, we'll say slash div. I don't know why VS code is formatting this so oddly but it is, so there we go. So we'll have this div now outside of where the width is set.

[00:06:10]
The width is set here on the section with the idea of contact of 400 pixels wide. So now I've got another div on top of it where I can give it that plum background color. And there's no restrictions on the size of the div with a class of Section plum, so the purple will stretch all the way across the screen.

[00:06:29]
So now all we have to do is write that particular class. So over here on the side, I think I put this up towards the top of the screen. In case we wanted to use it on another page somewhere else, we could just say background color divs. If that's something you wanna add later.

[00:06:55]
And we'll say section- plum has got that background color of var-plum. And then of course down here in the contacts section, we can get rid of the background color here. You don't need that anymore. So if we save that and we take a look at our webpage, refresh.

[00:07:20]
Now we have the purple color stretching all the way across the screen, but yet we've still maintained that tight width that we want there in that contact. And then the last part of that is what do we do about that particular button? Great question. Well, remember that we wrote a class in here somewhere called button, didn't we?

[00:07:42]
Right here, around line 158 we have a class called button. So we can just take that class now and apply it to the link that we have in the contact section. So here we are in the contacts section down here, there's our href inside of that element. We'll put in our class of button and save that.

[00:08:07]
Let's take a look at that webpage. So yeah, we sort of got a button here, sort of. But it's the wrong font and it has an underline on it, right? Why is it doing that when the same class of button up here works just fine for our resume?

[00:08:26]
Well, the answer is always at the CSS somewhere, and when it doesn't work, doesn't work the way you expect. It's almost always an issue of inheritance or the cascade. So what's happening here with our button, we never actually called out a font family on the button itself, did we?

[00:08:46]
And we never actually called out no underline on the button. Those things are inherited. We actually called out that mono font family back here on our nav class and that got inherited by the button. And we called out our lack of an underline here on nav a. And that got inherited by the button as well.

[00:09:10]
So what we should do now? Well, we could make yet another class if we really wanted or we could just simply add to this. So we could say our font family is var-mono, right? And we could say text-decoration none. Now that will be repetitive for the button that shows up in our navigation, but it will be helpful for the one that shows up in our contact.

[00:09:40]
We don't have to set up another class, so we're not hurting the navigation, but we're helping the contact. Overall I'd call it a win. Save that, and refresh the screen. And there's our email me button looking the way we want it to look. So then the last part of this has to do with the footer, and it looks like my footer padding is not quite working here, so let's add to my footer class.

[00:10:09]
Let's add a padding of 4rem 0, so that will put 4rem on the top and the bottom of the footer, nothing on the left and the right. And if we save that and refresh the webpage, that's so much better now. We have a little bit of breathing room there.

[00:10:26]
>> Why did we add the div around the contact section? Can we make the width 100% instead?
>> You could make the width 100% instead. So let's do what this person is suggesting. So on the contact section, if we took out our div with a class of section plum.

[00:10:50]
And over here and our CSS, if I can find it. There we go. With the 400 pixels, we'll just take that out, okay? So now what we're saying is this contact, which has, we should add back in our color here, background-color, var. So now we have the plum right on the contact section.

[00:11:17]
It's gonna stretch all the way across the page. We took out the width, so this should work great, right? So let's save our HTML. Let's save our CSS. And let's refresh the webpage. And what happens. So, this is what happens, if my goal was to keep my text compressed in that small window, the way that I had it styled before, we have gotten rid of that particular piece of styling.

[00:11:46]
Now I could probably re-add in this very specific instance. Re-add that width of 400 pixels to the paragraph itself, but sometimes we wanna think about what's gonna happen for the page overall. How many exceptions to the rules do we really wanna make? And so the concept of a div with the class of section plum meant that I could take that same background color, and as I said, maybe potentially eventually apply it elsewhere in my document rather than adapting things very specifically here.

[00:12:20]
So you are not necessarily completely incorrect, this is another solution. You'll have to also add that with the 400 pixels to that paragraph at least in order to bring back the styling.