style master css tutorial

Tool checklist

In this section you will learn

a methodology for standards based web development
what browser you should use for this tutorial
what other web development tools you will need

<< 2. css introduction | 4. first style sheet >>

Before we begin, let's make sure we have all the tools we need to develop a style sheet.

The browser

You won't need to test your pages in a browser in the sense of seeing if what you want to do actually works, because I've done all that for you when I wrote the tutorial. You only need the browser so you can check that you have created the code correctly. Everything you do in this tutorial works in Internet Explorer 6 (and 5), Safari 1, Firefox 1 and Opera 7.5. You'll need one of these so you can see what you are doing at every step.

A word about browser testing

The tried and tested way of developing and testing a standards based web site is to write standards based code, keep it valid, and watch your site develop in a browser which supports the standards as closely as possible. My recommendation for this would be the latest version of Firefox on Windows and Safari on the Mac. Test as you go in Internet Explorer and try to overcome any problems while keeping your code valid. Most important, forget the idea that you are trying to create a page that looks the same in all browsing environments. Focus instead on creating a page that looks good in all browsers you care to target, and supports the standards so it will continue to look good in the future.

This will probably seem like a bit of a radical idea at first if you're used to the old way of developing which was to "make it work in Internet Explorer". Trust me when I say going the other way works better when you're working with the standards. You won't find yourself writing a whole lot of hacked up code to make it look right in Internet Explorer and then having to redo it all because not only is it not valid, but it doesn't actually work as you were expecting it to in a browser which supports the standard a bit better.

The Style Sheet Tool

As I mentioned before, this tutorial is set up so you can do it in a number of different ways.

At every step you will find code examples showing you exactly what your style sheet should be looking like. This means that just like with HTML, all you need for a bare minimum approach is a basic text editor - even something like WordPad or SimpleText.

But if you want to hand code, why not do it with an editor that gives you a few nice tools like color coded syntax and text formatting that make life a lot easier? Style Master has all this, sitting alongside a suite of editors for those times when you don't even want to think about remembering correct CSS syntax. The 30 day demo gives you more than enough time to work your way through this tutorial. And if you want to just use the editors and largely forget about hand-coding, there's lots of screenshots throughout this tutorial to help you find your way.

The Web Development Tool

As this tutorial is about styling with CSS you won't really have to work with the HTML part of a site. The only thing you have to do is right at the beginning of the project where you create an HTML document and paste the raw code for the page you will be styling into it. You then link this page to your style sheet. After this there are a few points where you have to open the HTML document again just to have a look at the code so you can better understand what's happening with the CSS. All of this can be done in any simple text editor like WordPad or SimpleText. If you choose to use a WYSIWYG HTML editor, just make sure you know how to use it in code editing mode. Apart from that it should be fine, if unnecessary.

OK, that's all we need then - have you got it together? Next we will create our first style sheet.