Using Cascading Style Sheets in Dreamweaver 4.0

Cascading Style Sheets offer a great deal of potential in web page development. But, like so many new technologies, there are definite tradeoffs to consider. First, the positives.

CSS give you incredible control over the appearance of a web page. You can also define a style sheet which can then be linked to every page in your site. To make global changes to a particular style definition, all you need to do is change the style sheet. The changes will cascade through all the pages which use the stylesheet automatically. Finally, part of CSS includes layers which allow you to stack and position graphics and elements of you page exactly.

On the downside Netscape and Internet Explorer do not view CSS the same way (WOW! Believe it or not!!!!). This can lead to some very real inconsistencies if you are developing for both. Older browsers will not recognize the CSS tags at all. Finally, should the CSS file become corrupted or the link broken, the pages will not display on browsers which support them.

All this said, they are still a very useful capabilities of DW to understand. Let's create a style sheet.

Step One: Select a master page to use to create your style sheet. In order to access the style sheet, open the CSS Styles palette under the window menu.

The resulting palette looks like this:

Step Two; To begin, we need to create our first new style. Click on the tiny arrow in the upper right hand corner of the palette window, then select New Style...

This menu will pop open.

You've got several choices here. Let's examine each in turn:

First, the type. Making Custom Style allows you to create your own styles. I actually recommend this normally.

Redefine HTML tag allows you to modify how HTML tags appear. The only problem with this is that it can be confusing in reading your code.

Finally, CSS Selector allows you to alter the way that hyperlinks look including the default, active, and visited state. This is very cool, but only works in Internet Explorer

Go ahead and type a name in for your custom style. Make sure to leave the "." before the name!

Define in allows you to either create an external style sheet, which can be shared between pages; or just in one page. Leave this as it is.

Now, click ok

Step Three: A style window will pop open. This allows you to define the particular styles. The best way to learn this is play around with it.

Once you've got a style defined, click OK

Step Four: Notice that the style now appears in the Style Palette. In order to use it, select the text you wish to change, then click on the style name.

Step Five: Let's create a border style now. Go through the same process as above, but select Border in the style palette.

Step Six: Apply your style, then preview it in Internet Explorer

Step Seven: Now, if you were to view it in Netscape, it would look like this:

Welcome to one of those idiosyncrasies!

Step Eight: Now, to use your style sheet, open a new page. Then open the styles palette and finally select Attach Stylesheet in the menu

Step Nine: Locate the style sheet you created before, and select it