From GIMP to xHTML and CSS

Let's start styling the page now and make it look more interesting. I left out the images for the time being, this way it's much easier to see the effects of our CSS rules.

First, we need to create a separate css file. Create a file and call it sow.css (sow for 'school of webcraft'). Then, go back to your HTML document and put the following in your header tag to link the html document to the css file: <link rel="stylesheet" type="text/css" href="sow.css" media="all" />

After adding the stylesheet link, all CSS rules you put inside of sow.css will be applied to your HTML document. Take another look at the HTML document. As I told you before, the browser applies some default styling, which not only means bold text, but also white-space, margins and padding. Different browsers can use different default values. This can cause trouble when styling our document, since different browsers will use very different values and display the page very differently. To prevent this problem, we are going to set margins and padding for ALL elements to zero. 'Resetting' values like this is often called 'using a CSS RESET'.

1. Let's go to our CSS file now and reset the margins and padding for all elements. We will use the star character (*) for this, but you can use your own CSS reset rules.

Now if you take a look at the page again, you will see that the margins are gone and all of the text 'hugs' along the top and left edges of the browser window.

2. Then, we set a base font size for the page. We want to use the relative unit em and by setting the font-size for body to 62.%, we make sure that 1em equals 10px. So if we want to make a font 16px big, we can use font-size: 1.6em.
We'll also set the base font, for now we will pick Tahoma, with verdana and the generic sans-serif as fallbacks.

3. Now we will place the central column in the middle of the page. For that, we need to give it a specific width - in our case 960px - and set the left and right margins to auto. We will also set a temporary background color so you can more clearly see the dimensions of the central column. Note that, because we removed the margins, the column starts at the very top of the page.

4. The header image is 140px high, so we wet the height for #header to 140px. We'll use a temporary background color, which we will later replace with the header image we created.

This is the CSS so far:

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {

margin: 0;

padding: 0;

}

/* 2. Setting a base font size */

body {
font-size: 62.5%;
font-family: tahoma, verdana, sans-serif;
}

/* 3. Positioning the central column */

#centralCol {
width: 960px;
margin: 0 auto;
background: whitesmoke; /* temporary background color */
}

/* 4. Styling the header block */
#header {
height: 140px;
background: red;
}

/* 5. Styling the navigation */
First we will give the navigation block a temporary background color and set a height of 90px:

Next thing to do when styling the navigation, is to get rid of the bullets, which we can do by setting the list-style-type for UL to none:

Then comes styling the links. For this, we need to know the dimensions of the button image we will use for the background. In my case, the dimensions are 171px wide and 58px high.  And because we need space between each list item, we also set a margin-right value of 40px.

We need to set the link items to display: block , and apply some padding around it. This way  the entire area around the link will be clickable. We also set text-align to centered so the links get positioned in the middle of their buttons.

We also need to float the left items left, so we get a horizontal list rather than a vertical one. So our code now becomes:

Next we'll push the unordered list down so that the buttons will go in the middle of the navigation bar:

Now when we get to the next part, all we have to do is to apply  the background images.

Now let's visit the body block.

6. Styling the body section

Before we start at the body section, let's first set our minimum font size for all text inside the central column to 14 pixels:
#centralCol {
font-size: 1.4em;
}

We also want a padding for each element, so that there is some space between the central column's left edge and the start of the text. To accomplish this, we set a padding-left of 30px for the #header, #nav and #body blocks:

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

We also want more room between the lines of text. To accomplish this, we can use line-height. Usually a value between 1.5em and 2em works good:
 
#centralCol {
line-height: 1.6em; /* set the base line height inside the central Col */
}

We're going to create white-space between the navigation block and the next below. We'll use margin-bottom for this:

#nav {
margin-bottom: 20px;
}

Let's also add white-space after each paragraph. We can choose to do this using margin or padding. We're going to use margin-bottom on the p tag:

p {
margin-bottom: 12px;
}

Let's also set the font-size for the headings:

#body h2 {
font-size: 1.4em;
}

#body h3 {
font-size: 1.2em;
}

We've come to the columns which have to be positioned respectively to the left and to the right. To do this, we're going to float #leftCol to the left and #rightCol to the right. We also need to give them a width which is half the size of the content area, or less. This means 900/2=450px.

This gives us:

    #leftCol {
    float: left;
    width: 450px;
    background: red;
    }

    #rightCol {
    float: right;
    width: 450px;
    background: green;
    }

You will notice that #footer is also floated, in order to force it on its own line, we need to CLEAR it:

#footer { clear: both; }

When using floats though, you have to pay attention. Let's give the containing DIV (#twoCols) a background color:

#twoCols {
background: aquamarine;
}

Now if you look at the page in your browser, you will notice that you do not see the background color. This is because, when its child elements are floated, the DIV does not know how tall it needs to be. We can fix this in several ways. One of the easiest and the one we're going to use here, is to ALSO float the parent DIV:

#twoCols {
float: left;
}

When you look at the page now, you should see the background color shining through.

The text in the two columns are too close together, so we'll apply some padding to the left and right of each DIV. Remember to adjust the width accordingly:

#leftCol {
    float: left;
    width: 420px;
    padding-right: 30px;
    background: red;
    }

    #rightCol {
    float: right;
    width: 420px;
    padding-left: 30px;
    background: green;
    }

Our CSS file now looks like this:

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

/* 2. Setting a base font size */

body {

font-size: 62.5%;

font-family: tahoma, verdana, sans-serif;

}

/* 3. Positioning the central column */

#centralCol {

width: 960px;

margin: 0 auto;

background: whitesmoke; /* temporary background color */

}

/* 4. Styling the header block */

#header {

height: 140px;

background: red;

}

/* 5. Styling the navigation */

#nav {

height: 90px;

background: orange;
margin-bottom: 20px;

}

#nav ul {

list-style-type: none;

}

#nav ul li {

width: 171px;

height: 58px;

margin-right: 40px;

float:left;

background: lime;

}

#nav ul li a {

display: block;

padding: 20px 45px;

text-align: center;

}

#nav ul {

padding-top: 15px;

}

#centralCol {

font-size: 1.4em;

line-height: 1.6em; /* set the base line height inside the central Col */

}

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

/* 6. Styling the #body block */

#body p {
margin-bottom: 12px;
}

#body h2 {
font-size: 1.4em;
}

#body h3 {
font-size: 1.2em;
}

    #twoCols {
    background: aquamarine;
    float: left;
    }

    #leftCol {
    float: left;
    width: 420px;
    padding-right: 30px;
    background: red;
    }

    #rightCol {
    float: right;
    width: 420px;
    padding-left: 30px;
    background: green;
    }

#footer {
clear:both;
}

Now let's style the footer. We're going to give it a temporary background color and set the height to 80px:

#footer {
height: 80px;
background: lime;
}

This is what we want, except that the footer hugs too much against the two columns we styled earlier. We can set white-space in different ways, but since our #twoCols div is going to be the last one, we are going to use a margin-bottom on #twoCols:

#twoCols {
margin-bottom: 40px;
}

Next' we're going to center the text inside the #footer paragraph:

#footer p {
text-align: center;
}

We also want to align it vertically, which can sometimes be difficult in CSS. Luckily, we have a very powerful way to absolutely position elements inside a parent block.

If try to absolutely position the footer paragraph, you will notice that it is positioned relative the the webpage, so your text will end up somewhere in the middle of the page (I use top: 40% instead of top: 50% because otherwise the next will be positioned starting FROM the center of the block, which is too low):

#footer p {
position: absolute;
left: 50%;
top: 40%;
}

However, when we change the position parent DIV (which is #footer) to relative, the paragraph will be positioned relative to #footer!

#footer {
position:relative;

}

Finally, we are going to give our body{} a lightblue background, the gradient we created earlier will come here instead:

body {
background: sky;
}

And now we have our styled document, without any images. The Final CSS code for this chapter:

/* 1. Reset margins and paddings for all elements. You can use this, or you can use your own CSS reset rules */

* {

margin: 0;

padding: 0;

}

ul {

list-style-type: none;

}

/* 2. Setting a base font size */

body {

font-size: 62.5%;

font-family: tahoma, verdana, sans-serif;
background: DeepSkyBlue;

}

/* 3. Positioning the central column */

#centralCol {

width: 960px;

margin: 0 auto;

background: whitesmoke; /* temporary background color */

}

/* 4. Styling the header block */

#header {

height: 140px;

background: red;

}

/* 5. Styling the navigation */

#nav {

height: 90px;

background: orange;

margin-bottom: 20px;

}

#nav ul {

list-style-type: none;

}

#nav ul li {

width: 171px;

height: 58px;

margin-right: 40px;

float:left;

background: lime;

}

#nav ul li a {

display: block;

padding: 20px 45px;

text-align: center;

}

#nav ul {

padding-top: 15px;

}

#centralCol {

font-size: 1.4em;

line-height: 1.6em; /* set the base line height inside the central Col */

}

#header, #nav, #body { padding: 0 30px; /* Padding to line up everything vertically */ }

/* 6. Styling the #body block */

#body p {

margin-bottom: 12px;

}

#body h2 {

font-size: 1.4em;

}

#body h3 {

font-size: 1.2em;

}

    #twoCols {

    background: aquamarine;

    float: left;
    margin-bottom: 40px;

    }

    #leftCol {

    float: left;

    width: 420px;

    padding-right: 30px;

    background: red;

    }

    #rightCol {

    float: right;

    width: 420px;

    padding-left: 30px;

    background: green;

    }

#footer {
position:relative;

clear:both;
height: 80px;
background: lime;

}

#footer p {
text-align: center;
position: absolute;
left: 50%;
top: 40%;
}

Perhaps it doesn't look like much, but in the next chapter you'll see how easy it is to add images and make it look the way we want!