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.
There is really one more thing to take care of in the sidebar and that's the post archive calendar. So we're actually going to scroll down to that. After we've done that, we'll take care of the footer, in the next video. For now we're going to concentrate on the post archive calendar here and the first thing that we really want to do this make it a little smaller and yet make the caption, which is the July 2006 bit, a little bit bigger. So the first step in that is to say post archive table, set the margin on this to be zero on top and bottom and automatic on the right and left.
Tables, like images, sort of have an intrinsic width just because of the way tables are constructed. So giving an automatic right and left margins means that it will be center and we're going to set its font size to smaller. We go over to the browser and hit Reload. Then we discover that the text has gotten smaller and the calendar's basically centered. So the next bit is to take care of the caption. Now, here we're also going to center the caption and we're going to give it a 1em top margin, this will push the entire calendar downwards. We're also going to make it larger and boldface, so that it stands out a little bit more and has more of a title field to it and if we hit Reload, there it is, it pushed down because of the 1em top margin and it centered just like the rest of the calendar and a larger boldface.
So having taken that on, really the next thing to do is to deal with the table cells so that we form a grid. We're turning off the padding on these table cells because we don't want any extra padding between the borders on the table cells and their contents. Giving them a border, one pixel solid with this color, and also a background and a foreground color, this will basically give them a medium gray, it's not a pure gray, but it's sort of a medium gray with a little hint of blue purple to it a darkish background but an even darker foreground, and then inside each table cell, the text will be centered, so when we hit Reload, we get that.
So now, if you're looking closely foreground on these table cells is pretty close to the background on the divs themselves. They could've been equivalent, but it actually works better to make the color on the divs a little bit darker than the background of the div that surrounds the table. So that's how we ended up with that color of gray and then the last thing is to make sure that the links work all right and look all right. So here we're going to make any links inside of this stable white boldfaced. We're also going to give them block level display, which will cause them to generate block boxes that will fill completely the table cells in which they sit.
From the user's point of view it makes the entire table so clickable, that's actually not true. It's just that the a element fills the table cell and the a is clickable, so, you have that and then, when we hover them, they'll get greenish background color. So hitting reload we'll find out if they've turned white and then if we go and hover over them, they get greenish backgrounds. So that brings the style of the table together. All that remains now is to make the footer pretty.
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.