Fully code your site in CSS!

My long and promised tutorial has arrived. Fully code your website in Valid CSS and XHTML!

For this tutorial I assume you have basic knowledge of HTML. We will be making the website as previewed here.

To Download the template images for this tutorial click here.

This tutorial will take about an hour to complete if you are completely new to CSS and read every detail.

To start of make a folder for your website, inside of it create a file called index.html and stylesheet.css, also create a folder called images which is where you should put all your images for your template now.

Inside index.html have the basic html code setup ready so we can begin.
In the head of index.html put this code

<link href="stylesheet.css" rel="stylesheet" type="text/css" />

This line of code links to the stylesheet so we can use the styles inside of it, if your stylesheet was in a different folder we would put instead:

<link href="example/stylesheet.css" rel="stylesheet" type="text/css" />

Now we will add the first classes to the CSS File.

body {font-family:verdana, arial, helvetica, sans-serif;

text-align: center;margin:0;

}

#containerborder {

margin: 0 auto;

text-align: left;

width: 1028px;

background-color:#8ab5d3;

overflow:hidden;

}#container {

margin: 0 auto;text-align: left;

width: 1024px;background-color:#FFFFFF;

overflow:hidden;padding-bottom:20px;

}

Now, the body is the body tag class. Margin:0; makes it so there isn’t any margin in between the borders of the browser and your website. Text-align will make the div centered in the website.

We have containerborder which will be the side border of the website, its width is 1028px so we have 4px extra on each side from the container. The background color will be the border color which we will use #8ab5d3.

Container is the div which all the website content will be contained inside of, hence the name ‘container.’ text-align aligns the text to the left side. And overflow:hidden makes it so the div stretches with the content whether the div is being floated or not (Will be explained more later in this tutorial).

Now in index.html add this code inside the body tag:

<div id="containerborder"> <div id="container">

</div>

</div>

So whats the difference between class and id?. ID is more of the identification of the div, and Class is he class. When in the CSS style sheet if you see a # then that class can only be used for an objects id, while if the class starts with a . then its a class and can be used for anything. The problem with using ID is the w3 Validator will bring up errors if you have multiple items with the same id name so be sure to only use the # for items you know will only show up ONCE in your page, and use . for everything else!

Moving on, inside the container div add the header, so you should have this code now inside of index.html’s body tag.

<div id="containerborder"> <div id="container">

<div id="header"></div>

</div>

</div>

Like I said the id is just the identification of the tag, for this div we do not need to make a class inside of the css file because this one will just contain the header image, so we can put this in now.

<div id="containerborder"> <div id="container">

<div id="header"><img src="images/header.jpg" alt="Header" /></div>

</div>

</div>

This is pretty simple understanding, and the alt tag IS required in every image if you wish to be valid by the w3 validator standards.

Now before we move on, you need to know how div’s work. Div’s are like boxes that push each other around, and it does get quite annoying to fix them if you don’t know what you are doing. So for example. The header stretches along the whole length of the container (because the image is 1024px wide), so the next div we put in will automatically be pushed to right below the header, this is pretty basic logic. One thing you need to watch out for is 1px off div’s. Sometimes a div is set 1px too wide and it pushes everything else around, these are some of the most annoying cases on website building especially with lots of classes it can be pretty hard to find if you don’t know what you are looking for. So be sure to always calculate the widths of everything when you place them so you can avoid small mistakes.

Now add this code to your index.html file

<div id="containerborder"> <div id="container">

<div id="header"><img src="images/header.jpg" alt="Header" /></div>

<div id="navigation">

</div>

</div>

</div>

And add this to stylesheet.css

#navigation {background:url(images/navigation.jpg) repeat-x;

height:40px;

width:100%;

}

Repeat-x repeats the background image along the x-axis, if you did repeat-y it would repeat along the y-axis, and no-repeat is obviously no repeat.

Width:100% is pretty self explanatory, it goes 100% of the width of the outside div, not the width of the browser. If you wanted something to go the width of the browser, the parameter would be width:100% and not contained inside any other div’s which are fixed width. If inside a fixed width div the 100% will be the width of that container div.
height:40px; is for the background image, because div’s don’t stretch the height for background images you need to state the height yourself.

Moving on, in index add this in between the navigation div, so you should have this:(from here on out I wont add the whole code, the top line and bottom line will be from the previous code entry only, so you can see where the new code should be placed. All code in between the top and bottom line will be new code.

index.html:

<div id="navigation">

 <div id="leftimg"></div>

 <div id="navlinks"></div>

 <div id="rightimg"></div>

</div>

and in stylesheet.css add:

#navlinks {

margin-top:12px;

text-align:center;

float:left;

width:596px;

}

#leftimg {

float:left;

}

#rightimg {

float:right;

}

Margin-top sets the margin between the top of the div using that class and the div its contained inside of.
Float basically says I’m on the right/left side of this div and thats that? The reason we use these because of the pushiness of div’s like I had said above. But I did say something wrong above, no matter how much space the div takes, it will always push the next div down. So the div could take up 1px width of a 6000px div, but any div below that 1px div will be pushed below it. Thats why we use float. Float left allows us to set multiple divs next to each other. Float:left will put this div right up to the leftside of the container, the very next div that has float:left will be put up next to that previous floated div. And the float right will be put on the rightside of the container div…confusing? Heres an example image.

Hopefully that makes sense? Now edit the code in index.html to include the navigation and side images.

<div id="leftimg"><img src="images/navleft.jpg" alt="kirbyleft" /></div><div id="navlinks">» Home » Games » Latest » News » Community » Downloads  » About » Contact </div><div id="rightimg"><img src="images/navright.jpg" alt="kirbyright" /></div>

Remember always add the alt tag to your images. Now add this div to your code (Make sure it’s inside the container div and nothing else. SO heres what you should have in index.html

<div id="containerborder">

 <div id="container">

  <div id="header">

   <img src="images/header.jpg" alt="Header" />

  </div>

  <div id="navigation">

   <div id="leftimg"><img src="images/navleft.jpg" alt="kirbyleft" /></div>

   <div id="navlinks">» Home » Games » Latest » News » Community » Downloads  » About » Contact </div>

   <div id="rightimg"><img src="images/navright.jpg" alt="kirbyright" /></div>

  </div>

  <div id="navleftside"></div>

  <div id="content">

  </div>

  <div id="rightnav">

  </div>

 </div>

</div>

And in stylesheet.css you should add:

#navleftside {width:273px;float:left;}#content {float:left;width:530px;margin-top:50px;}#rightnav {float:right;margin-top:65px;margin-right:5px;

width:200px;

padding-right:5px;

}

You should by now know what all these do, margin adds a margin to that side from the containing div. Padding however adds a type of margin except from the content inside itself. Not much difference except one sets space on the outside of itself, and the other sets space on the inside itself from the border of itself.

Now inside add this code inside of navleftside

 <div id="navleftside">  <div id="star"><img src="images/star.jpg" alt="starend" /></div></div>

This is the code for the last part of kirby’s star. We don’t need a class because the image is not the background, so the div stretches to the image width, and thats all we needed.

Now we can add our Game list below the star, so add this code below the star div.

  <div id="star"><img src="images/star.jpg" alt="starend" /></div>  <div class="nav"></nav>

And you can add this to stylesheets.css.

.nav {margin-left:10px;background:#fff url(images/sidenav.jpg) no-repeat;width:187px;padding-left:5px;padding-bottom:10px;}

The margin-left sets the navigation away from the edge of the website by 10px so it’s not right up against the border. Background image is the navigation image, and the padding forces the text inside the div to be pushed away from the borders, this helps keep the text inside the background image ‘limits’.

So you can add your navigation inside of the nav div. So your code should be as below.

<div class="nav"><h2>Game List</h2><div class="navcont"><a href="index.html">Kirby's Dream Land</a><br />Kirby's Adventure<br />Kirby's Pinball Land<br />Kirby's Dream Course<br />Kirby's Avalanche<br />Kirby's Dream Land 2<br />Kirby's Block Ball<br />

Kirby Super Star<br />

Kirby's Star Stacker<br />

Kirby's Dream Land 3<br />

Kirby The Crystal Shards<br />

Kirby Tilt 'n' Tumble<br />

Kirby: Nightmare in Dream Land<br />

Kirby Air Ride<br />

Kirby & the Amazing Mirror<br />

Kirby: Canvas Curse<br />

Kirby: Squeak Squad<br />

Kirby Wii</div>

</div>

I snuck another div in there, which styles the text for the game list. Add this to your stylesheets.css code.

.navcont {color:#529dc0;font-size:10px;font-family:Verdana;}

Now what about the h2? It’s ugly, and when I link the games its just going to be the ugly default dark blue font underlined and all. Well, heres how to do it. If you wish to style an h2 tag for a certain div all you need to do is this.

.nav h2 {padding-top:13px;font-family:Verdana;color:#e3819a;font-size:14px;margin-bottom:5px;}

put the div class and the h2 right after it with the styles you want. Notice that nav and navcont have the . instead of the # key, that’s because I know eventually these classes will be used again on the same page, and this could lead to XHTML validator errors. So my div’s now are

<div class="nav"> instead of <div id="nav">

Now you wish to style your links? Same idea as the h2, except with a:link and a:hover etc.

.navcont a:link {color:#529dc0;text-decoration:none;}.navcont  a:active {color:#529dc0;text-decoration:none;}

.navcont a:visited {

color:#529dc0;

text-decoration:none;

}

.navcont a:hover {

color:#295f79;

text-decoration:none;

}

Put this in your code. this styles the link, a:link is just a..link, a active is an active link, a visited is the link style of the link has been visited before, and a:hover is when you hover your mouse over the link. text-decoration basically is the decoration of the link, you can say text-decoration underline, hightlight, and then you can change the style of the highlight/underline etc. If you look at the preview page which I gave a link at the top of this tutorial, the top link on the navigation is linked so you can see what it looks like.

Now the rest of the page is pretty much a copy of what we just did but different modifications. So onto the news section. Add this code inside the content div we added earlier.

<div id=content"><div class="newsbox"></div></div>

And add this to your stylesheet.css.

.newsbox {width:455px;margin-bottom:20px;background:url(images/news.jpg) no-repeat;margin-left:20px;padding-left:14px;padding-right:14px;

color:#999999;

font-size:11px;

}

.newsbox h2 {

padding-top:20px;

font-family:Verdana;

color:#e3819a;

font-size:16px;

}

You should know everything that is going on here, padding, color is the text color inside the text, font-family is the font family, you can add more than one font, so you could have font-family:Verdana, Arial, Times New Roman; etc…What is the point? If the users computer doesn’t have Verdana it moves to the next one which would be arial and so on. Margin-bottom is so we have a bit of space between each news box.

Now you can add some content to your news and add some other content.

Once you add some text to your content area(I added a bunch of lipsum text). You can add this below your text:

<div class="readmore"><a href="#">Read More...</a></div><div class="comments">Comments(14)</div>

And add this to stylesheet.css.

.readmore {float:left;padding-top:10px;font-size:11px;color:#999999;}

.comments {

float:right;

padding-top:10px;

font-size:10px;

color:#999;

}

I styled my comments for read more, you can use the example above to do the same. Now if you wish you can copy the whole codebox div and put it below/above the previous codebox div and change the words so you can see what the page looks like with multiple news elements on it.

Now that we have finished the news boxes, we will finish the right navigation.

The great thing about classes is instead of making the same class again for a different area of the page you can use it again, which is why I said make sure you know whether you will be using a class again or not so you know when to use the # or the . if you want to be safe you can just use the . all the time, but I prefer not to.

So all you really need to do is copy this from the left navigation:

<div class="nav"><h2>Game List</h2><div class="navcont"></div></div>

And change the words/add content. So my right navigation looks like the code below:

<div class="nav"><h2>Forum Stats</h2><div class="navcont">1,648,483Posts<br />4,583 Members<br />Newest Member: Atly<br />

<p>Latest Posts:<br />

OMG NEW SECRET!<br />

Hi, I'm New..<br />

I need help</p>

<p>Login   / Register</p></div></div><div class="nav"><h2>Affiliates</h2>

<div class="navcont">kirbyD<br />

Kirby Official Site<br />

Kirby Nintendo<br />

Kirby IGN<br />

Kirby File Planet<br />

Kirby Anime</div></div>

If you look at the rightnav class you will see instead of margin-left we have margin-right to give it space from the right side border of the website.

Now the footer, Add it right above the very last </div> tag, so you should have this for the footer in index.html:

<div id="footer">Copyright Kirby's Lair 2007 Created by MicoHono.com</div></div>

And in stylesheet.css you should have:

#footer {width:100%;height:30px;color:#0a3244;

font-size:10px;

text-align:center;

padding-top:3px;

}

padding-top so the text isn’t right along the top edge, and if you look at the container class it has a padding of 20px so all content inside of it is away from it’s edge by 20px so the footer isn’t too close.
</body>

Thats all, preview your website and it should look similar to this, if theres any questions feel free to ask

CSS/XHTML