Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There is just one more thing we need to do before the styling of our page is complete and that's deal with this footer down here. So you can see that this block text kind of outside our page wrap or white div area here. Let's look in the HTML and what's going on with that footer. Now it's after the end of the page wrap, so that makes sense why it's not in this white box. It has the HTML5 tag footer and then here is the content in there. So let's get start to styling that up. It's going to be in the style that CSS file, because of course the footer will be in all of our pages and I might as well put it in this file which we'll get loaded on all pages.
We'll put the styling information at the way bottom where any good footer information should be. So footer. Now it's not subject to the same width, because it's outside of this. So we're going to have to set the width of our footer equal to the width of what our page wrap is, which is 800 pixels. We're going to center it with margin 0 auto. Now we don't need to give it any top padding, because it's already have been pushed down a little bit from this, but we'll give it some bottom padding.
Just push it away from the edge of the bottom of the browser window. We'll make sure that the color in the footer is white as is in the mockup and that the text is uppercase. Then the letter-spacing is just spaced out just a little bit to kind of look cool. So let's save and reload and now we have it going on pretty good there, but we need to move this over here.
So one way that I like to that is kind of split it in half. Split these two area is in half make this one on the left, this one on the right and then make sure to set this right area to text align right. So it's flesh again this right edge, just like it is in our mockup. Well, let's take a look at the HTML we have two divs in there, one with quote and one with copyright. So let's style those and say quote is half the width and float it to the left.
Copyright is half the width and float it to the right. We'll make sure that the text- alignment on that right side is to the right. We'll hit Save and reload and that's perfect there except for one little thing. Remember what we learned about when you float objects in a parent it's going to lose its height. It's going to collapse. So we don't have that push against the bottom of the browser window, because the apparent has no height. So all we have to do fix that is go into our index.html and give footer a class of group which fixes that issue specifically.
We'll hit Reload and now the apparent has that height and we can get that push away from the bottom of our browser window. So our footer is complete and styled and that was our last step in completely styling this page. Now we have everything we need to start moving on to creating the WordPress theme.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105134 Viewers
56 Video lessons · 116911 Viewers
71 Video lessons · 86119 Viewers
131 Video lessons · 41183 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.