Cascading Style Sheets

Tutorials

Back to FAQ

Here are some short tutorials to get you started with CSS. In order to view them properly you should be using a modern compliant browser such as IE6, Netscape 6.2+,MOzilla 1.1. and Opera 6+. As this is a tutorial for beginners I will not be including too many hacks as the purpose is to learn CSS and not the bad implementation of it by browsers.

The first tutorial is to design a Basic Page Layout and although this could be considered an advanced topic it's a good place to start as most users will need to create a layout of some sorts. Click on the link below to start the tutorial.

2 Column Basic Page Layout


The next tutorial will show you how to perform a rollover without using javascript.

Roll your mouse over the links to see the effect.

Rollover Tutorial (no javascript)


A common problem before the advent of CSS was "How do I configure my Webpage for Print Output". Usually this would incur extra overheads in supplying a printer friendly page that was text only and could then be printed out by the browsers print button.

Things are a little easier if you use CSS so click on the link below to get started on the short Print tutorial.

CSS Print Tutorial


By carefully utilising the Heading tags (h1-h6) you can cut down on the amount of formatting you will need in your mark-up. This will not only save you time but will also make it easier to maintain consistency throughout your site.

This is a basic tutorial which should suit all abilities. Click on the link below and get started...........what are you waiting for?

Headings Tutorial


One of things you must know about is where you are going to place your elements on the page and how do you position them?

This tutorial explains the differences between Static, Relative, Absolute and Fixed positioning

Absolute & Relative Positioning


Continuing on from the last tutorial we explore the mysteries of Fixed positioning in relation to images in the backgrounds of elements and the body

Background Fixed Positioning


(Remember to bookmark this page as there will be more tutorials to follow)

 

Valid XHTML 1.0! Valid CSS!