1. Introduction to the Hands-on CSS Tutorial

Style Sheets are fantastic. They offer almost all the typographical and page layout power we've wanted on the web for years. They promise to make developing, tweaking and maintaining web sites an order of magnitude more productive than ever before, and they are a W3C recommendation, the next best thing to a standard.

So why aren't you using them already?

OK, so the browser support is not perfect.

But I think there is another important reason, a more important reason. The learning curve.
I teach this stuff at (the Australian equivalent of) College, and I know that it is something that even proficient web developers don't necessarily get at once. There are good reasons for that. So, this is my contribution to flattening the learning curve.

I want to see style sheets succeed. I think they are a tremendous technology, and I have a vested interest too. My company develops a style sheet editor (well, the truth is, I develop it, my company just sells it). But I only did that because I looked at this tremendous technology, and thought, "this should be the bee's knees".

This tutorial is very "hands on". In the process of developing a comprehensive style sheet that will form the basis of your web site design, what you might think of as a "core" style sheet, we'll learn about the most important aspects of style sheets. After these 10, 1 hour (or so) lessons (which I don't recommend doing in 10 straight hours, but don't let me stop you) you'll know how to use most of the important features of style sheets.

If you prefer a top down approach, I have also written a Guide, Everything You Ever Wanted to Know About Style, which covers the subject from a more theoretical perspective. You might prefer to begin with that, then continue with this, or do these lessons, then put it all into perspective with the Guide.

Who is it For?

Whether you know what style sheets are, or have only just heard of them, but you don't really know how to work with them, this tutorial is for you.

If you know something about style sheets, and how to use them, and now want to really master them, then try another handbook I have written, Everything You Ever Wanted to Know About Style. And once you've mastered this tutorial, you might also want to turn there to learn much more about style sheets.

What are we going to do?

Over the next 10 hours we are going to build a core style sheet, using a simple text editor such as BBEdit or NotePad. This style sheet will define, or describe how your site should look. Never again will you have to define the background color, or image, or the various link colors in your document. Every time you create a new page, you can simply link to your style sheet, and you are set.
And if you want to overhaul your site, just edit the style sheet, and your whole site appearance will change.

We'll begin with a short introduction to style sheets. If you want to get straight into the action, then go to our checklist to get started immediately.

But aren't there any style sheet editors?

Some people believe that using a simple text editor is the best way to create style sheets, and HTML for that matter. They say it gives them a lot more power and control. But there are also lots of people who don't want to learn all the intricacies of style sheets, as you really must if you are going to work using a text editor only. If you are one of these people, you will be interested in taking a look at a cascading style sheet editor. Caution, unashamed plug coming up...

Style Master is our cascading style sheet editor that both teaches the novice how to get started with style sheets, and helps the more advanced produce syntactically correct style sheets every time.

If you want to forget all about typing correct style sheets using a text editor and start your first style sheet using Style Master, there is a version of this tutorial that comes with the application. You can download a Windows or a Macintosh demo of Style Master and get started today.

If you like, take a look at The Style Master Tutorial online first to get an idea of how the application works, or you can also go to our Product Info pages.

Can I Download this Tutorial?

A version of this Tutorial is included with the demo version of our CSS Editor, Style Master. This version works through exactly the same exercises using the editor rather than hand-coding.

You can download a Windows or Macintosh version of the application here. Using Style Master you won't be able to make a mistake in your style sheet, you'll know how well your style sheet will be supported by the various browsers, and you'll get this tutorial so you can really master style.