Free CSS Templates

Welcome to the final part of the tutorial. So far you should have picked up all the techniques and expertise to code a template. I will show you in this part how to finish the template off with a footer and just make our coding a little neater. I will also give a few tips for optimizing you website.

Coding the footer using CSS

I reckon you should probably be able to do this on your own by now but if not don’t worry. I will go through making the footer for the template. Basically its going to be within the wrapper div (holding the website content) and below the ending tags for the content. The attributes needed for our example will be width 100% and with a solid background colour.

.footer{
width:100%;
padding-top:15px;
padding-bottom:15px;
color:#fff;
text-align:center;
background:#4E4739;
}

All pretty self explanatory I would say. No need for anything complicated for this one. For the XHTML simple place the following just before the final div end tag (the one for wrapper div):

<div class=”footer”>Template by <a href=”http://www.freecss.info”>freecss.info</a></div>

So thats its for the CSS and XHTML. You are completed. Now time to just clean a couple things up.

CSS in external stylesheet

I believe you can do this in more than one way but I will just do it the way I am used to. Its quite simple. Press file then new and select CSS. Go to code mode of your current template and copy everything after <style type=”text/css”> and before </style>. Past this into the code mode for the CSS file. If want you can only copy it into notepad. Next save the file as style.css and in your tutorial folder.

You have now created your style sheet. Next thing to do is to remove from <style type=”text/css”> to </style> on your index.html. Also remove the tags themselves. The template now has no CSS defined. If you switch to design mode you will see what your website would look like with CSS turned off- Just as well CSS exists

Now you will need to link in your index.html to you style sheet. This is simple. Just add the following code you to your index.html’s head section (after title tag probably and before the </head> tag).

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

If you check in design mode you should now see your template with CSS defined.

Make sure everything validates

I always do this with my websites but sometimes it doesn’t really make much of a difference. Its best to have proper compliant code which validates. To check your CSS and HTML use w3c validator. You can choose various options to validate your code there. It will tell you any problems which you should be able to then go and fix.

After checking my coding I found no errors. That just comes after many years of coding. At first I would make something like 20 different errors on my first draft of coding so to speak. If you have problems with the way your website is displaying its often worth checking to see what the errors if any for your coding are. It can often show up spelling mistakes and typos.

Some search engine optimization tips

A few tips for coding templates. First off try to keep any text in your templates as html text. Try not to contain text in images. If you do this its best to use the image replacement technique to make it look as though the image is text. Its also best to use alt tags for you images that you do have. This helps with accessibility. Have your website title or keyword in your title tag. This is probably the biggest on page seo factor so use it!

You have reached the end

Well if I was to say it was great fun I would be lying (deleted parts and had to rewrite them. Lots of stumbling blocks and time was spent on this tutorial so please if you find any problems with it post them here and I will try to sort them out. I hope you found the tutorial interesting and informative. You can hopefully learn something from what I have written.

Download Finished Template

Preview Finished Template

If you wish to request or ask me something please post them here. Thats all for now folks!