Create a New Style

We are going to create a new style sheet.  We do this from the style panel.  The CSS Styles panel is under the design panel.  If it is not open, you can select Window to CSS Styles.

Along the bottom of the panel, you will see three four buttons.  The second button is the new style button, select it.

The New CSS Style window will open.

1)     The tag name.  This can be either your custom tag or pick one from the drop down list.

2)     You select this if you want to create your own custom tag.  You can name it what you want, it just needs to have a .  before the name (.mystyle).  The name goes into the Tag: spot

3)     You use this when you want to define an existing HTML tag.  You click here and select the tag you want to define from the list in #1

4)     You use the CSS Selector to change the appearance of your hyperlinks.  You can change the link, hover, visited, and active properties.  A great way to create simple rollovers without using buttons or graphics.

5)     Make sure you select this because you want to create an external file so we can attach it to other pages.

When you select the external file option, Dreamweaver will ask you where you want to save the file.  Make sure that you save the file into your root folder.  Remember where you put it because you will have to attach to your other pages.

 

If you only have one style sheet for the site, I usually name my style sheet style.

The next screen that will appear is the CSS Style definition.  Here is where you make the changes to your tag.  When you have made your changes, hit OK and they will be saved into the style sheet.

When you want to attach the style sheet to another page in the site, you select this button in the bottom of the CSS Styles panel.

The computer will bring up the next window asking where the style sheet is located.  Click browse and find the style sheet.  All the styles you defined will be applied to your current page.

If you want to edit one of your styles you would choose the style listed in the panel and then choose the edit style button at the bottom of the CSS Styles panel.  It will open the Style definition window and allow you to make changes.

 

Remember, changes made to the style will be made in all the pages that have this style sheet attached to it.