Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.


They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

style master css tutorial

Table of contents

This tutorial teaches CSS using both hand-coding and Style Master for Windows. You can also follow it using instructions for Style Master for Mac OS X. By working through the exercises you will learn all about CSS for text styling and page appearance including layout, and create a stylish looking page like this. If you want to learn CSS by hand-coding alone, simply work through all the exercises and code examples and skip all the specially styled Style Master instructions.

Style Master is a CSS editor which includes full support for hand-coding. It's a great way to start learning CSS: hand code when it suits, and fall back on the WYSIWYG editors when you're working with new properties and selectors. This tutorial is included as part of the 30 day demo download.

1. Introduction

The Introduction tells you who this tutorial is for and how it works. You also get to take a look at the finished project.

2. A short intro to CSS

What style sheets are and how they work.

3. Tool checklist

You'll need to make sure you've got the right tools for the job before we get started.

4. My first style sheet

Here's where you really get started by creating a style sheet, and then an HTML document which links to it.

5. Basic page appearance

Create your first style sheet rules and learn some of the basic properties.

6. More text properties

See some more ways of styling text.

7. Class selectors

Use the HTML class attribute to style only particular elements.

8. Styling links

Learn how to customize the appearance of links so they fit in with the rest of your design.

9. Page layout

Use CSS to create a smooth liquid layout.

10. Creative use of images

See one way of using background images to really add some pizazz to your designs.

11. Descendent selectors

Learn about this important selector that lets you selectively style elements on your page.

12. Styling a navbar

Finish off the page by styling the navbar.

13. Where to now?

Got the bug and want to learn more? This list of resources will get you started with more detailed style sheets information, tools, and more.