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
117 Video lessons · 42709 Viewers
119 Video lessons · 54067 Viewers
65 Video lessons · 14377 Viewers
113 Video lessons · 82845 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.