Being a designer, there's no way we can keep this document looking like it is. I'm going to spin through the simple design used in the final version but feel free to experiment on your own with different backgrounds, colors or fonts. Here's a great CSS style resource for you to check out.
Before getting started, you should download the images we'll be using to save time. Make sure you keep these images in the same folder as "index.html". As usual you can change these images later.
Onto the body, we've already centered the page and now we'll add a margin to the page in order to give the content container some breathing room. So jump into the stylesheet located at the top of the document and add the following to the body selector.
Easy enough, now you should have a 10 pixel margin surrounding the page which will be most evident on the top before the "container" border.
Next, let's add a bit of color and an image to the background...
All good right? Take a peek. Now we can't read the text. There's a fix for that, head to the "container" selector in the stylesheet and give it it's own background color.
Yeah, that's better. Time for the masthead. For this element we're going to give it a little height, some color and a background image.
Go ahead and take a peek. Just to note, if you are using your own images, make sure that they are long enough so that they don't repeat. You can also learn about background positioning if you want to take this a step further.
Continuing with the masthead, you'll notice there's a small, white margin above your masthead. <h1>, <h2>, etc. tags inheritantly have a bit of a margin around them. Luckily those tags can also be used as selectors. The difference is unlike "id" using a pound (#) sign preceeding the selector or a "class" using a period (.), standard html tags require no charactors before the selector. First we'll get rid of that nasty white space above the masthead. Add the h1 selector to your stylesheet and get rid of the margin...
Now let's center the text and give it some color...
Set the font size, weight and family...
Heading tags use a bold font face as default, that's why we use "normal" for the weight to over-ride the default value. This does not apply to paragraph tags. The reason I used two different font families is websites can only use fonts installed on a user's computer. If that user doesn't have "Trebuchet MS", it will use the next font in the list. You can add several more as well but I used two just for demo purposes. So let's have a look at where we are. The title seems to be butting up against the top. That's an easy fix, just add some padding to the h1.
Now that's better! For now we're going to skip over the main menu, we'll get to that later. This is an easy one so I'm just going to spill it all at once. We're going to add some padding around the page contents and update the paragraph and heading 2 fonts. Here you go...
The last thing is the footer, this is just like the masthead so it should be pretty straight forward.
For safety sake, we also need to add a "clear" property. Further into this tutorial we will be adding a column and this will prevent the footer from jumping into either that column or page content. More about that later so for now, simply add this...
We're looking good, but we still need to give the footer text a little style. There are several ways to do this but the simplest way is to define a "class".
Now drop that class into the footer's paragraph tag...
We're all set with the basic design treatments and here's your download.