Basic HTML | Site management | Assets | Library of Page Elements| Find and Replace | Templates | Style Sheets | Forms | Imagemaps | Mouseovers | Flash buttons & text | Frames | Tables: Formatting & Sorting | Preview Browsers | Font Lists | Colors | Automating Tasks | Pasting in a Script
Cascading Style sheets
Cascading Style Sheets let you specify the appearance of some text element in HTML. Basically, you define a 'class' of that element (or a generic class of any element) that has the settings you want, and then apply it to the elements you want. This allows you to, for instance, have two kinds of headings, citations, etc. in the same document. It also allows you to make global changes to the settings for all the elements of that type. So, instead of laboriously changing a bunch of different sets of text to one color of green, then changing your mind and making them yellow one at a time instead, you can give all of the elements the same class, and experiment with the colors for the whole class.
If you save the styles to a separate style sheet, you can use them in any other web page too.
To set up a Cascading Style sheet in your document:
Once you've set the settings to your liking, click OK, then Done in the Edit Style Sheet window.
Now, when you want to apply that style, select the area you want to apply the style to, and select CSS Styles from the Text menu. Choose the style you want to apply. To remove the style from something, select it, go to CSS Styles, and choose 'none.'
Suppose you want to change the attributes for one kind of element throughout the entire document?
When you set up a 'custom style' in Dreamweaver, and set it on something, Dreamweaver will either add the class as an attribute of the element (if you have selected the whole element), or create a 'span' element around the text you have selected and add the class to that.
If the settings you have created in CSS don't appear to be applied properly, be sure the class is applied to the whole element.
Editing an existing style
If you want to change the attributes of a style you've already created, you will need to edit the Style Sheet.
Special Types of Styles-- Advanced
To change the style of links (unvisited, visited, active, or when they are hovered over), create a new style as above, but choose the Advanced selector type, then choose a:link, a:visited, a: active, or a:hover. Then create the style and set the options as above.
Adding a Stylesheet an existing page
To use an existing stylesheet on a page, go to the Text menu, choose CSS Styles, Manage Styles.
Then click on the style you want to use, and click the "Attach" button.
The next page has some sample stylesheet applications: StyleSheet examples