Footer CSS Styles

[00:00:00]
>> Jen Kramer: All right, so here in your course website, you'll see that I've given you two looks for the way that this should look,
>> Jen Kramer: Because it's not very pretty to start with. So we have our h2s. They're centered on the page. We have our lists, then we've had the bullets removed from the list.

[00:00:19]
Our text is centered. And then interestingly, for whatever reason, our designer decided to take our icon bar. Instead of making these blue icons, they are black icons down here on the bottom. So we're gonna need to restyle these a little bit for this purpose. And then, on desktop, we're going to have basically three columns of links, and there are other projects and our contacts separated a little bit more.

[00:00:46]
Okay, so let's code all of that up. So we need to change our markup here for our footer, and we're going to think about our markup for that 750, pixel breakpoint for our footer. When we get to that point in time, we will have three different columns here of information.

[00:01:05]
And so we need to make sure that we have grouped our H3 plus our lists such that we have three children in order to make this layout work correctly. So what I'm going to do to get that in place, here in my HTML, I will start here after the h2 for other projects, but here at blogging.

[00:01:29]
And I will add a div with a class of footer text box. And then this is the blogging part of it. So we have an H3, we have our UL, and then a /div. So what you'll see here, format my HTML is that that will give us a child.

[00:01:55]
So we have other projects, we have one text box here, we're gonna repeat this process here for around open source. Again, div with a class of footer, text box and slash div after that, and then the same thing third time around other courses,
>> Jen Kramer: Slash div down there.

[00:02:27]
And then what this is going to do now is, you"ll see we have our three children here,
>> Jen Kramer: Which will wind up being our three columns, but now they need a parent in order to get them in order, right? We need a parent to organize these children and so around the these particular three items, I'm gonna give this a div with a class of footer text.

[00:03:02]
>> Jen Kramer: And so that will give us our parent of footer text and they will give us our three children. Each child is called footer text box. So now we have a really good structure here, and we're ready to apply a little bit of styling to that. Down here for our contact, of course, we already have our icons.

[00:03:22]
The styling is good there except for the fact that we need to make them black instead of making them blue. So we don't really have any layout issues there. All right, so now I'm going to apply some styling for mobile. And so just before my media query, I'll add the styling here.

[00:03:45]
Footer styling, okay? And I'm gonna start with my generic footer HTML element, and I'll say text align center, so just like we saw before, that will center our text here on the page, great. Then inside of our footer text boxes, footer text box ul. So in other words, each of those little sections there where you see the bullets hanging out over there on the left hand side, we've got to get rid of that.

[00:04:22]
So once again, list, style, type of none margin zero, padding zero. Okay, so we've killed all the spacing, well done. And then to give us a little bit more space there vertically, cuz now we've smashed everything together really, really tight, I will go to my footer text box li, and I'm going to say my line height is two.

[00:05:00]
And that will push things apart again, so that we have a little bit of breathing room between everything.
>> Jen Kramer: I also wanna make my font size a little bit smaller, so once again, on my UL, I can say my font size will be calc. And then my base font size times 0.85, so in the case here of my footer text, this will make it about 0.8,5 rem.

[00:05:39]
So it's 1 REM by default. We'll multiply that by point eight five, so it'll become point eight five, and the text size will be just a little bit smaller all the way through. All right, so those take care of the footer text box. All right, now I'm gonna go back to the footer text overall, .footer text which is my parent.

[00:06:03]
So remember, we have the parent up here controlling all of the individual text boxes. We'll start here with our line height of 1.5 and we're gonna say our display is grid and. And we're gonna say our grid template columns is 1fr, and once again, a gap of 2rem, which will give us space between the individual boxes.

[00:06:33]
Nice, right? I'll push all of that apart. Now the spacing between the h2s and everything else looks a little bit off. So I'm going to add to my H2s down here in my footer, a class, and I'm gonna call it Hh2 footer, cuz I'm super creative that way.

[00:07:00]
>> Jen Kramer: Okay, and then we can style that.
>> Jen Kramer: .h2-footer,
>> Jen Kramer: Margin of 2rem 0. So we're gonna have 2rems of space on the top and the bottom that'll push everything apart really nicely. And then the last thing I have to address are these SPGs down here in the bottom.

[00:07:32]
They're currently blue and we want them to be black. So .footer text .social. So the social icons that are within the footer text environment, which will override the blue that we had earlier, which was just on .social, we can say our fill is var Onyx. That doesn't seem to be working.

[00:08:02]
Let me just double check my HTML here. So if I go into my HTML, well, this is not inside a footer text. Footer text is up here. So this is actually the icons and then socials inside of icons. So let me fix my class here. Let's put this back to social.

[00:08:23]
So we have .icons, and then we have .social, so this should be .icons, .social, and then then we wind up with our icons down here turning black, which is what we're looking for. And we can also set up the additional state here. So this would be .icons .social: hover.

[00:08:56]
And our fill color here will be var marina. And when we roll over our icons down here on the bottom, boom, there we go, they turn blue.