Free CSS Templates

This is a complete guiding to coding a template in valid XHTML and CSS using Dreamweaver. The tutorial will also teach you how to slice you psd for coding and all the steps needed to complete your website design. This is my biggest css tutorial to date. Please enjoy the tutorial and hopefully you can learn something from it. Below is a content list for the tutorial. Its best if you follow the tutorial in order without skipping steps out.

The tutorial will be using css techniques such as image replacement technique and using clearing divs. You can also pick up some good tips for structuring and coding the XHTML of your website. That includes the correct use of heading tags.

• Part 1 - Setting up

• Part 2 - Coding the basics

• Part 3 - Coding and slicing the header

• Part 4 - Horizontal CSS Navigation

• Part 5 - Floating the columns

• Part 6 - Coding the content

• Part 7 - Right column navigation

• Part 8 - Finishing off

Anything missed out or could be done better? Leave a comment here if so. You can see the template used in the css tutorial below:

Preview of image

Preview of coded template

So are you ready to get started? If so go on to Part 1 - Setting up.