Since I'm not going to be helping you with content, we're now essentially done with index.html (well, we'll probably make a few changes--but for all intents and purposes we needn't touch it again). So close that and give our new star, style.css, a prominant place in your workspace... and let the magic begin!
Earlier, we defined the four sections of our document, and now we need to write some CSS to tell them how they should look. You'll remember each of the divs is defined by an id; to reference ids on a stylesheet you preface the id name with a #, so when we add them in your stylesheet should look like this:
You'll note the curly braces ({ }); those are what CSS uses to seperate out style information for different bits of your page (each thing you can assign a style to--body, or #header, or what have you--is called a selector). Semicolons (;) are used to seperate declarations (such as 'color: red') within selector groups, and colon (:) divide properties (ie, 'color') from their values (ie, 'red'). You don't have to remember all those names, but they do make it easier to talk about this stuff.
CSS doesn't care about spacing, so you can organize things the way that seems the easiest to you. When I first started writing it I collapsed each selector into one line so I could see as many of them as possible at once, but when my styles reached a certain complexity this didn't work as well, so I switched to giving each declaration a new line. That way I could more easily find a particular declaration for a selector; and to make things even easier, I try to always put my declarations in the same order. Of course, the order doesn't matter either, and you're free to use the one that works best for you. But lets restate our first couple selectors, with expanded spacing:
As you can see, tab stops make the seperate selectors stand out for easy identification.
Now to get some real work done. First, we lay out the basic positions of our sections:
As you can see, we've variously added heights, widths and margins to some elements, and a position: absolute to one. They also all have borders, but the borders won't stay; they're only so we can see where each div is. Save your stylesheet, refresh index.html in your browser, and see what you have.
Interesting, eh? But as you can see, the green border of the menu div is overlapping the red of the header, by amounts that vary depending on your browser of choice. To fix this, we need to add something to the body selector:
Now things look a little better... but maybe we want some margins. So we bring them back:
The first number after 'margin' gives the vertical margins (top and bottom) while the second defines horizontal. If we wanted, we could set different values for each of the four margins, by writing margin: 2px 4px 6px 5px--in that case, 2px is the top margin and the others procede in a clockwise direction (left, bottom, right). Note that the 'px' stands for pixels; we could also define our margins by percentages, points or ems (but we won't worry about that for now).
Notice that, when we add margins to the body, everything shifts to accomodate them--except the vertical aspect of the 'menu' div. No matter what you make the body's top margin, the top of the menu box will stay in the same place. As you probably guessed, that's because of that position: absolute; what it does is to, well, position the div absolutely, outside of the normal flow of the page. The 'top' property then tells the browser where the top of the div should be--in this case, 90pixels down from the top of the page. We could also add a 'left' property and move the div somewhere else horizontally, but for this design we don't want that. As you see, if we fail to provide a 'left' declaration the div stays where it would otherwise be, horizontal-wise. Which is what we're looking for here.
Now, I picked the 90px value for top because that's how tall our 'header' div is. Now that we have 10px of top margin on the whole page, however, we need to take that into account for 'menu's positioning, and change top to 100px. Astute readers will note that if we want to be precise about it we should make that value 102px; and they may also realize that the reason for that is, we also need to take into account a pixel of border on each side of the header. But since we'll be getting rid of those borders in a moment, we don't have to worry about those 2px. In fact, let's get rid of them now, and see what we have:
Well... it's not ideal. So we add more CSS information. First, see what we can do with the colors, and also adjust our margins a bit:
Now we're getting somewhere! You see that I've added margin: 0 and padding: 0 to three of the four divs. It's good practice to always give your divs margin and padding values, because otherwise you leave those values up to the different browsers, and the different browsers each give you adifferent default value. Needless to say, that isn't good for your design. IE5/Win also gets the box model wrong and doesn't handle padding correctly with explicitly sized elements, so the more things you can give a padding of 0 to the better off you'll be.
Now, I also made some changes to the 'content' div which require a bit more explanation. You'll recall that earlier we had a margin-left of 150px, which got the content out of the way of the menu. However, as we saw in the colored border stage, it also left a gap between the bottom of the menu and the beginning of the footer. If all the divs (and the body) shared the same background color this wouldn't be an issue, but since they don't it's less than ideal. We can't easily stretch the 'menu' div (because we can't expect to know the height of either it or the 'content'), but we can fake it by giving 'content' a border of 150px, the same color as 'menu'. Since 'menu' is absolutely positioned it will fit right on top of this border, giving us just the look we want (and the border-right just balances the page a bit). Positioning? Done.