SS Tutorial

Introduction

Contrary to popular belief, Netscape 3.0 does not support Style Sheets, although Netscape Communications is slowly implementing them with 4.0. Internet Explorer 3.01 partially supports them with most of the commonly used features. Use them accordingly.

Style Sheets act as a "template" that can control the layout and design of your pages. They work separate from your HTML, giving you easier maintainability. With Style Sheets, you can finally specify margins, leading, colors, fonts, link styles, alignment, sizes, and more. You can also create a lot of different layouts for the same HTML Tag.

There are 3 basic ways to add the functionality of Style Sheets:

1. Inline - Creating the elements for each HTML Tag. This will allow the same HTML Tag to have different styles on the same page.
2. Embedding - Creating the elements on the page itself that will affect every occurrence of an HTML Tag.
3. Linking - Creating one page that defines the elements and point the pages you want to affect to this page.

For beginners I'd recommend using Embedding or Linking flavors depending on your needs. Once you start getting the basics down, you'll find all ways are pretty easy to do. The Linking Style is great if you'd like to use the same style on multiple pages, then you can use Embedding and Inline on specific pages that don't fit the design style of the Linking Sheet.

The precedence Style Sheets follow is Inline, Embedding, then Linking. Inline Style takes precedence over Embedding Style, which takes precedence over Linking Style.

Cascading Style Sheets

Because you can use more than one style on a page, the browser follows the rules in a cascading order to determine precedence and to resolve conflicts. If the linked style sheet defines a heading tag as blue, the top-of-page style sheet defines it as red, and the reader wants to see purple, the browser has to decide what to display. In general, the author's style sheets override the reader's style sheet, which in turn overrides the browser's default values. If the author uses all three methods listed above, the inline styles take precedence over the embedded block, which overrides the linked style sheet.

Like HTML, the best way to learn how to use Style Sheets is to experiment with them. I hope you've learned at least the basics of Style Sheets and how powerful the layout features are. Happy Styling!