coding CSS

There is a certain technique to coding CSS, and it's quite simple. First, you have your basic style sheet. This belongs in the <head> tag of your HTML. In the style tag, you should at least have a few basic things (words in italics are explanations, not part of the code):

<style>

This code changes the appearance of the page as a whole, such as background color, and the kind of font.
body
{ font-family: Verdana;
color: #FFFFFF;
font-size: 10px;
background-color: #000000;
}

This code changes your links.
a:link, a:visited {
text-decoration:underline;
color:#000000;
}

This code changes your links when you hover.
a:active, a:hover {
text-decoration:underline;
color:#444444;
}

</style>

This code simply sets up the background, font, and link colors. Now, to actually code a CSS layout, you'll need to add other elements. For me, the easiest CSS to code are DIVs. These are simple containers that are extremely customizable and easy to place. Let's add a few to create a more unique layout.

Creating DIVs


Underneath the link code, you should start creating your DIVs. The code for a div is like this:

#divname {
div properties;
}

First, the DIV name. This name, or ID, is extremely important. It will tell your coding where to get the properties for each part of your code. For example, if you type <div id=divname> in your coding, it will draw the properties from the DIV called divname. (If you don't understand that concept, try clicking here.)

Now, let's set up a DIV for the style code earlier in the tutorial. Let's make a simple, center-aligned DIV. That code will look like this:

#firstdiv {
background-color: #ffffff;
width: 700px;
margin: auto;
}

In order to put that in your code, put this in the <body> tag: <div id="firstdiv">. Then, put your content and end it with a </div> code. Here is what your code and your page should look like now.

Now, let's add a content DIV and a navigation DIV. First, let's add the content. You should put it inside the DIV you just created, so that the final layout will be centered. To do that, place the <div id="content"> code between the <div id="firstdiv"> and </div> tags. Then, put your content in that DIV, and put an extra </div> tag at the end (one to end your content DIV, one to end your firstdiv DIV.)

You will also need to use the "float" attribute. By putting float:left in your attributes for the content DIV, it will align to the left of it's container. (in this case, the firstdiv DIV). In the style sheet, your code for the content should look like this:

#content {
background-color: #ffffff;
width: 550px;
margin: auto;
float:left;
}

You will notice that the DIV's defined width is lower than the firstdiv DIV. That is because you will have to fit a navigation DIV inside as well. This may all sound confusing, but you can see a sample of the code and the page here.

Now, to add the navigation DIV. In order to add this beside the content DIV, be sure that you place this between the </div> tag for the content and the </div> tag for the firstdiv. Your code in the style sheet should look like this:

#navigation {
background-color: #ffffff;
width: 146px;
margin: auto;
float:right;
}

Notice that the float is now set to right. This is so that the navigation DIV will be to the right of the content DIV. You may also wonder why the width is 148px instead of 150px. That is because the overall width of the DIV does not include borders, and the content width + the navigation width should be the same as the firstdiv width, so that they fit inside. You should now see this.

Of course, what is a layout without a banner? So, let's add the DIV for the banner at the top! Directly before the content DIV (<div id="content">), we're going to add a banner DIV. Just be sure you end it before the content DIV, as well. In your style sheet, you should add a code like this:

#banner {
background-color: #ffffff;
margin: auto;
width: 100%;
text-align: center;
}

Notice that the width is 100%. That is so it can stretch across the DIV. You should also notice the text-align: center code. This aligns all text in the DIV to the center, and in this case it will align your banner to the center. Check out how that looks here. And there you go! You've made your first DIV layout!

Tips and Tricks