Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content. It lets them easily make minor changes to a site or perform a complete overhaul of the design. In CSS Web Site Design, instructor and leading industry expert Eric Meyer reviews the essentials of CSS, including selectors, the cascade, and inheritance. The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colors, backgrounds, and white space. Using a project-based approach, Eric walks through the process of creating a Web page, while teaching the essentials of CSS along the way. By the end of the training, viewers will have the tools to master professional site design. Exercise files accompany the training videos.
So here we are, in the last of our exercise files and everything looks great, it looks like we've pretty much done everything, it all looks good until we scroll down at the bottom of the page and realize that the footer needs a little bit of work. So, what we need to do, start styling it. What we're going to do is go over to 1010.css and bring in some footer styles. Now we're going to start up by clearing the footer below the floated columns. In theory, we don't really need to do that, just go back and look for a second, it's already down below, all the columns have come before it.
That's because the content column, remember, is as wide as the browser window at this point and it's basically filling out the entire browser window and then the sidebar div is sitting right over it, but, just to be safe, let's clear the footer and now we'll give it a background color and a little bit of padding on top and bottom and also on the sides, so that when we hit Reload, it all comes together very nicely. This extra space here between the sidebar and the footer is actually caused, if we go back a bit by the bottom margin on the sidebar, which is the taller of our floats, that's causing that separation.
So there's a little bit of weirdness in terms of the spacing with the footer as compared to the text, that's because of that bottom 1em margin on the footer. That's why the amount of space here between the top of the background and the top of the text is, this is smaller than this amount between the bottom of the text and the bottom of the footers background. That's because there's that 1 1/2em padding up here, but there's no top margin on the paragraph. they didn't close this site design by Dominique etc., etc. On the bottom of the paragraph there is 1em margin and then below that there's the 1 1/2em of bottom padding on the footer.
So if we remove that bottom margin which we did in the CSS and will now do here by hitting reload, then, the space above and below the text balances out. And then the last thing to do is to style the links in the footer, so that they are more like what we want. We're going to make them be dark gray in color and then underline them. So that instead of being, you know, blue or purple, that will just be sort of a slightly lighter color then the text around them and be underlined, thus indicating their hyperlinked nature.
That pretty much takes care of the footer and it takes care of our design, everything is in place and right were we'd like it to be.
There are currently no FAQs about CSS Web Site Design.
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.