Great Design: How to Build A Basic CSS (Part 3)

Hey

In the previous part I showed you how to create the basic wrapper for a CSS website. If you haven't caught up its very simple you can find it here. This episode will be about creating the header. I'm sorry but this series isn't going as quick as I liked due to the time constraints.

Step 1) The first step is to create a new style. Like you have done with the wrapper one needs to be created for the header this again is done in the style section. I am going to call it header. I wanted this to cover the whole wrapper. To save a bit of time i've put the whole code below.

#header {
width:700px;
height: 200px;
background:#808080;
margin-bottom:10px;
}

What this code means is very simple. The width of course means it fills the whole wrapper, the height is how high I want the div. Background is the colour I want to use. If you want to use a background image you can use this bit of code.

background:url(/image/loaction.jpg);

The margin is for used later for the lower elements.

Step 2) The next step is to nest the div. This needs to be placed inside the header and is very simple. You need to put the div inside the wrapper div like shown below. (You need to add in the leading arrow because blogger is playing up.