Practical CSS Layouts

Basic CSS Footer Styles

Jen Kramer

Jen Kramer

Practical CSS Layouts

Check out a free preview of the full Practical CSS Layouts course

The "Basic CSS Footer Styles" Lesson is part of the full, Practical CSS Layouts course featured in this preview video. Here's what you'd learn in this lesson:

Jen completes the styling for the mobile design by adding CSS to the footer. The completed code for the mobile version of the easy design can be found at the CodePen link below.


Transcript from the "Basic CSS Footer Styles" Lesson

>> All right, so let's go back now to our footer, so in the footer, let's take a look, we have a big space between the end of our last review and the start of our footer, and it's in uppercase, right? Let's take a look at our current code pen.

That is a much smaller space and it's not an uppercase. So what suggestions do I have for styling the footer?
>> There is an uppercase text property, but I can't remember what it is.
>> Okay, great. So footer, right? We need to make it uppercase and if we google for that we would find text-transform is the one we want uppercase.

Especially if I spell it right, transform. There we go. Okay, X transform. What else?
>> Could put a big top margin on footer.
>> We can put a big top margin on the footer, right? So let's do that. And I think I said margin-top 5rem. There we go.

We got a big space. Congratulations, we've built the mobile version of our first website. Yay, [APPLAUSE] What questions do we have on this? The mobile version of the Easy website, we are done.
>> Is It common convention to organize your globals in the top, and then I guess your HTML selectors and then your class names?

Yes, yes, and the reason you do that has to do with the cascade part of CSS. So you put those global selectors on the top before anything else. You put in all your HTML elements that have low specificity and are easily overridden, and then you can get into your more specific styles later in the style sheet.

Yep, absolutely.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now