Great Design

Welcome to Great Design. This website will look at the best designs on the internet. As well as tutorials teaching you how to produce amazing designs and get good looking results.

How to Build A Basic CSS (Part 3)

Dec 8, 2007


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 {
height: 200px;

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.


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.

>div id="wrapper">
div id="header">

I'm sorry it was a bit short but I really don't have the time, if at all possible I may do one tomorrow. So sit tight.