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 now we have the sidebar sitting in place on the right side, where we want it, and we've done some basic styling. Now it's time to start adding the boxes that are part of the design over here, these are sort of dark grayish boxes that need to be in place. The way to do that is in the sidebar, there are actually each of the sections of the sidebar that correspond to these boxes, is just enclosed in a div. This makes sense, because div stands for division and these are divisions of the content in the sidebar. The visual separation of putting them in boxes, implies the structural separation.
They are in separate divs, so we have these divs, we're just going to give them backgrounds of 3A3C2D in this case and foreground, white foregrounds and a little bit of padding around the sides, at least the sides in the bottom of 1em on the sides in the bottom to push the content away from the edges of the blocks. The one place where we do want to do that, we do want any top padding because if we did that, then that would push the headings of the divs, which are inside of divs, away from the top of each div and then we give each one a little bit of top margin in order to make sure that they sit apart from each other visually, and that will push if there are two divs in a row, which as a matter in fact there are, there's the tea the day and the post archive, this top margin will push them apart from each other, as you can see if we hit Reload, inside of that, the space in between the two here, that's that recorders em top margin and then it's actually the same space up here above tea of the day.
And then this inset is the 1em padding along the left side in this case and there's 1em padding along the bottom and one along the right and the reason we do have any on the top is because we don't want to push these titles down, but we did push these titles inward, so we're going to have to cope with that. And the way that we're going to do that is, with our h3s, which is what those headings are, I'm going to fiddle with the font size, we're going to give them negative right and left margins.
In addition to some padding, and we'll get the padding in a moment. So that these h3s have no top and bottom margins and they have negative 0.8em right and left margins. The reason is 0.8 is because their font size is 1.25, so 1.25 times 0.8 equals one. So that will be 1.25 times 0.8 equaling 1, means that they'll be the same size as the 1em padding on the div and in order to make them all a bit taller, give them a 0.4em top and bottom padding and 0.8em right and left padding, which is to counteract effectively the negative margins.
So, again, the size of the h3 pulled out to the right and to the left by negative 0.8em and then the padding pushes in the content by that same distance back inwards. The reason that I used 0.4 padding is because it was half of 0.8, that was really the whole rational there And then with text-transform lowercase, we make the text be lowercase. So when we hit Reload, make the text be lowercase. So I'm going to save this and go over and hit reload and there you have it. These are now sort of filling out the top part of each of these divs. That's pretty much it for this particular exercise.
After this, we're going to get into dealing with the contents and individually of tea of the day and the post archive.
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.