You should already have an XHTML document made from the last lesson. If you don't, a copy of it is here: test.html

We're going to make this first style sheet in the header so it is easier to keep track of. All the style information should be placed between <style type="text/css"> and </style>. To start out, view the file in your favorite web browser. You should see a blank white screen. This is because the only content in the document is three 0 pixel by 0 pixel divisions.

To start with our layout, we want to give some style to the body of the document. We don't want everything to be right at the edge of the document, so we'll give it some padding. Padding is a space on the inside of a box to keep it from touching the edge. Think of it as the bubble wrap or foam on the inside of some shipping packages. It keeps things from hitting the edge, and generally gives the page a less crowded feel. 5 pixels should be enough padding to achieve this.

Next, we want to find a nice background color. Leaving this blank will keep it at the color you saw when you first previewed it, but we want something a little less bland, so we choose the color #9091A8 (a medium dark greyish blue). This is signified by using "background-color"

The last thing we do for the body is take away all margin. This isn't really important, but it's not going to harm anything by putting it there. Your first style should look something like this:

body {
margin: 0px;
padding: 5px;
background-color: #9091A8; }

That wasn't too bad, eh? Next comes something a bit more difficult. We're going make the actual layout of the page. An easy way to do this is to make sure you have everything planned out on paper first. Just look at the current page, and you should get a pretty good idea of the layout we're using.

We'll start with our header as it's at the top. This is also the easiest of the three sections. To start, we want a box with a height of 100 pixels, and a width spanning the screen (minus the padding from the body). To do this, we only need to set the height of the division. We make a style called "#header" and put the "height" property in it. Specify the height at 100 pixels.

Now, we still can't see the division because it's inheriting the background color it has from the body. Let's set this at a darker purple color (#9966CC). Use the same property as on the body. Preview your progress so far. You should see a purple box spanning the screen with a bit of padding around it.

That box just sitting in the middle of the screen looks kinda ugly. To make it look more like a seperate item in the page, we're going to stick a border around it. We'll make it a clearly visible black border. To do this, we use the "border" property. We could use three different specific border properties ("border-color" "border-style" and "border-width"), but that's harder to maintain, and frankly, we don't want to type that much. Instead, we're going to mash it all into one property using shorthand. To do this we just take the three different property values and put them into the border property like this: "border: 2px solid black;" It isn't too hard to see what it's saying.

We also don't want anything below the header to come up right next to it. Things should never be too crowded, so we'll give the header a marging, but the margin is only going to be at the bottom. We type: "margin-bottom: 5px;" After this, you should have this style:

#header {
height: 100px;
margin-bottom: 5px;
background-color: #9966CC;
border: 2px solid #000; }