Soundoff - A Basic Guide to Creating a CSS Template

A Basic Guide to Creating a CSS Template

A few weeks ago I was reading some tips for search engine optimization (SEO), and one of the first tips as to make sure your content was as close to the top of the file as possible. Neat, I thought, and how am I supposed to do that when the top of my file is taken up by a string of table information so that I can align my header properly followed by all the stuff in my handy little sidebar?

The answer, as my wife so graciously supplied, is using the cascading style sheet to define the template through div tags. My first thought was: Huh? I'd played around with the div tag before, but I didn't know where to start in building a webpage based around them.

But I've been a programmer for over twenty years (since I was thirteen and programming on a Vic-20), so learning something new is something I have grown used to doing over the years. The first thing I did was grab a template from one of the free template sites and used that as an example of how to set up a website based on a CSS file, and then I went all around the web trying to find out how to make it do exactly what I wanted it to do. (Anytime I am trying to find out something about HTML I tend to take a trip all around the web trying to gather the information.)

It took a few hours, but I was able to convert my first site to using a CSS template, and then I was able to transfer the basics over to this site. As I mentioned in my last article, I'm no great web designer. When it comes to anything artistic, I've got two left hands, feet, etc. I've also got all thumbs, and all big toes. And probably two left kneecaps. But, while these pages aren't the prettiest things on the planet, they seem to work okay.

And the great part is, overall, I find using the cascading style sheet to layout the pages is much easier to deal with compared to putting everything in tables. My old page had tables inside of tables inside of tables inside of tables trying to get the format right. Now, I just have some div tags and my page is organized a lot better. (As well as being a bit better with SEO.)

So, for those looking to do something similar with their webpage or blog, I thought I'd go through the steps of setting up a very basic template. I'm just going to create a header bar, a side bar, and a content area, with a couple of containers to wrap around the page. Once you know how to do that, it's not too difficult to add to it to create something closer to what you might want your webpage to look like.

We'll start out with the stylesheet. This is where we will define the classes we are going to use for our div tags. The first thing I am going to do is define my body with a dark gray background so I can get a gutter around my page.

body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
list-style-position: outside;
list-style-type: square;
background-color: #808080;
}

Next, I am going to create an overall container. This is going to define my workspace and be set for the width of whatever resolution I am designing the page for. I designed this website for 800x600, so I set the width of my container for 800 pixels.

#container
{
margin: auto;
width: 800px;
position: relative;
}

You'll notice the container class has set the position at relative. This will center it on the screen so that someone viewing the page in a higher resolution will see everything come up in the middle and not off to the side.

The next thing I am going to do is create a main class that will wrap around the real content. I am setting the width to 780 pixels which will give us a gutter around the page. I'm also going to give this one a border of 5 pixels with a darker gray color than my body. I'm mainly doing this to give an example of how to create a border around your webpage.

#main
{
width: 780px;
margin: 0 auto;
background-color: #FFFFFF;
border-color: #606060;
border-style: solid;
border-width: 5px 5px 5px 5px;
}

You'll notice that you can define each border independently. So, If you want to make the right and bottom borders larger than the top and left borders, you can do this pretty easy.

The next thing I am going to do is create a header class. This is going to hold my banner or whatever I might want at the top of the page. I am going to give it a background picture so we'll have some graphics on the left side of the header.

#header
{
margin: 0 auto;
width: 780px;
height: 100px;
background-color: #FFFFFF;
background: transparent url('/images/edge.gif') top left no-repeat;
}

Next, I am going to define a class for my content and a class for my sidebar. I am going to have a sidebar on the left side of the page, but I am going to define the content class first.

#content
{
float: right;
padding-left: 10px;
padding-right: 10px;
width: 590px;
background: #BCC594;
}

You'll notice that I am putting in some padding so that the text won't go right up against the edge of the sidebar or the border. I've seen two ways of setting up some padding, and in the sidebar I'll do it the other way. Also, notice that I am using float: right in the class. This makes the area float on the right side and anything outside of the div tag would ordinarily wrap around it. Of course, we won't have anything outside of this div tag except other div tags, so we are doing it here just to define where the content area is going to be.

Now, to define the sidebar:

#sidebar
{
padding: 0 5px 0px 5px;
float: left;
width: 160px;
background: #788A73;
}

The one thing you want to be careful with is to make sure all the pixels add up. I am designing for 800 pixels wide, and my main content was defined at 780 pixels. What I have here is a content divider set at 590 pixels plus 10 pixels on the left and 10 pixels on the right for padding, so that's 610 pixels. Then I have a sidebar with a 160 pixel width and 5 pixels to either side, so that's 170 pixels. Together, they add up to 780 pixels, which is the width of my main divider. If you mess up and these add up to more than that main divider you'll see one going on top of the other instead of side-by-side.

Now, that's all we need for a very basic webpage layout, so we'll work on the HTML file.

First, you need to tell your webpage that you are going to be using XHTML elements. You do this by adding the following line:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

And modifying your html tag as follows:

< html xmlns"http://www.w3.org/1999/xhtml" xmlns:v"urn:schemas-microsoft-com:vml">

If you leave these lines out you might get unpredictable results from your webpage. Initially, I forgot them and didn't notice it because it still showed up okay in Firfox (my browser). But I like to check things in Internet Explorer and found that with IE6 the page wasn't being centered. I added the line defining the document type and everything worked okay.

This is the HTML for the actual page:

<body>
<div id="container">

<div id="main">

<div id="header">
(Put Header HTML Here)


</div>

<div id="content">
(Put Content HTML Here)


</div>

<div id="sidebar">
(Pute Sidebar HTML Here)


</div>

<div style="clear: both;"></div>


</div>


</div>

</body>

You'll notice that I have a comment line every time I end a div tag. This is a good idea because some of those sections will grow in length. It makes it much easier to see which div tag you are closing if you have comments.

You'll also notice that I have the code for the sidebar after the code for the content. Since I've told the sidebar to float on the left and the content to float on the right, I can put them in any order I want. Since it is good for search engine optimization to put the content as close to the top of the file as possible, I layout the content first.

Another important thing to note is the following:

This line forces the browser to draw the page at this point. If you don't have this line in and you add another divider like a footer to the end of the page it will draw up top in the same area as the content and sidebar. This is because we are using floating div tags. So, by adding in this line, we are telling the browser to draw those floating div tags so that anything after that point will be drawn below them.

And that's all you really need for a basic page. To see how it looks you can check out the example I created. You'll notice that I used some odd colors for backgrounds in my code. That's so that you can see the different areas in the example. The html I used for the example is the same as shown except I just put in the words Header, Sidebar and Content instead of "(Put Header HTML Here)" and I added a table to the sidebar and content just to give it some length to mimic what it would look like with real content. I also link back to this article. Other than that, it's the same HTML in this example.

For those thinking about making the switch from using tables to layout the webpage to using a css file to layout the webpage, I think you'll find it to be a much more organized and easy way of going about things once you get used to it. Certainly, the webpages you will work with will be a lot cleaner without a bunch of table code everywhere.

Now, remember, I am pretty new to all this myself having just learned to layout a webpage through the css file a few days ago. If you have any tips, or if you spot any mistakes or odd ways of doing something, then leave a comment.

Posted by Dan on 08/28/07