Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Next we're going to style the footer. Let's hit a return. I'll type footer, beginning and ending bracket. The first property here is going to be font-size. We're going to set that to .85 ems. That's going to give us a 15% smaller font size than the base font. Then a space. We're going to set color to #9ba0bd; space. We're going to set background-color, and we're going to set the background color to the same as the body.
So let's come up here and just copy that color. Let's come down here and paste it, then a semicolon. That way the footer will actually look like it's outside of that main content page container. Then a space. We're going to set padding: 10 pixels on the top, 10 pixels on the right, 10 pixels on the bottom, and 0 pixels on the left. Save our work, come back to the operating system, and let's reload this in a browser.
On the browser, we can see our footer down here. Since we set the padding to 0 on the left, the copyright lines up now with the page container and we can see that background color. Since the gradient is much taller than the amount of content we have in here so far, you can actually see that solid color here. But once we add in more content and this gets taller, the background color of the footer will match the background down here. If it turns out that your website doesn't have enough content to go beyond this gradient here, then you can always go back into Photoshop, change the gradient on the background graphic, and resave out that slice.
Now that we have the main content rule styled, next we'll target these individual links that are inside of the promo areas.
Get unlimited access to all courses for just $25/month.Become a member
119 Video lessons · 47404 Viewers
117 Video lessons · 34382 Viewers
113 Video lessons · 80280 Viewers
116 Video lessons · 70203 Viewers