Free CSS Templates

CSS Template Tutorials - Coding the Basics

The part of the tutorial will code the very basic things. It will use CSS to define the main holding div and style the text and links for the template. CSS code must be added between <style> and </style> in head section of webpage.

Setting up page properties

CSS Template Tutorial - Finishing Off

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.

CSS Template Tutorial - Right column links

The tutorial is almost over and the template is almost finished. In this part I will show you how to create the simple navigation which is on the right column in the design preview. It is going to be a navigation created using unordered lists just like other ones.

CSS Template Tutorial - Coding post content

In this part we will code the article background and the comments button. For the design we are using for the tutorial the content on the left is a post in wordpress. The content of each post is going to be held in a div with a background at the top. There is also a div tag inside that one with the background at the bottom. The comment button will then be added into the end of the inner article div into its own div.

CSS Template Tutorial - Column floating

This is going to be a short part of the tutorial. In this part I will basically set up the left and right columns so they are ready to add the content to. This is the basic structuring of our template. First thing you will need to note is the gradient underneath the navigation on the design. This will have to be added as a background for a content div.

CSS Template Tutorial - CSS Horizontal Navigation

Welcome to the horizontal navigation tutorial. So far you should understand CSS and the way it works and you should have a header with a logo. In this part you will be coding and slicing the horizontal navigation as you can see in the preview. of the design. The tutorial is to create a "sliding door" technique navigation since it has rounded edges.

CSS Template Tutorial - Slicing + Coding Header

Welcome to the slicing and coding tutorial for the header. In this part you will slice each image used for the header and logo and code it using CSS and XHTML. The first thing you are going to have to do is to slice the image.

CSS Template Tutorial - Setting Up

Okay welcome to part one of the tutorial. What you will be doing in this part is setting everything up to begin coding your template for your website. This tutorial is for slicing a design made in photoshop and coding it in dreamweaver. You can also access example code at various stages through the tutorial if you have any problems.

Coding a CSS Template in Dreamweaver

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.

Simple CSS Horizontal Bar Graph

I used this technique on my blog to create a simple graph. It can be used as a type of meter or as a bar chart. On the blog I use it to show how my month income is made up. At the moment 75% is from freelancing and 25% from Adsense. You can see a demo of the chart on my blog at: Web design and development tips