Cascading Style Sheets

Cascading style sheets allow you to set up formatting independently of the individual html files. This is very useful when working on a site; it keeps the look of pages consistent and saves a lot of set-up work. In this workshop we will use a css to set the colors of the background, links, text and headings and the font faces and sizes used for the individual page elements.

The first step is to create a new stylesheet file. This is explained on pages 263 of the Dreamweaver Quickstart Guide, but it's a little confusing. The thing to realize is that you have to use Link in the Edit Style Sheet dialog box to create a new stylesheet.
You can get the Edit Style Sheet dialog box from the Text menu: Text>CSS Styles>Edit Style Sheet, by pressing Control-Shift-E, or from the icon in the Mini-Launcher that looks like this . The Edit Style Sheet dialog box looks like this:

 

1. Click on the Link button and the following dialog box will appear:

2. Type in the name of your stylesheet file — in this example I've used mellon.css.
3. Now you have an empty stylesheet file that you can fill in by Editing it from the Edit Style Sheet dialog box.
4. This is the dialog box you will see after hitting Edit in the Edit Style Sheet box above. To add any elements to your style sheet you hit New in this dialog box.

 

5. The New Style dialog box appears and you select the element you want to alter. In this example the tag is <body> which will allow you to set the font and background for all the text in the file.

 

6. This Style Definition dialog box allows you to set all the parameters of the tag. In the case of the a tag the font and color are important.

 

Repeat steps 3-6 for the body tag (the background color and font type and color for the whole apge are set here) and any others that you want to alter. A list of basic HTML tags is available on page 54 of the Quickstart Dreamweaver Guide and here.