This page only covers using CSS with the Dreamweaver interface. Please see our overall CSS help pages here.
To use Dreamweaver to write your CSS files, click on "Window" from the top bar. Then, click on CSS. This brings up the CSS dialog box, which appears as the box below.
To use the CSS help box, click on the buttons at the bottom of the box, or click on the arrow to the right hand side, and choose from the list there. This is shown in the image below. With the links below or the side arrow, you can attach an existing style sheet, edit the existing individual styles, or add a new style.
Once you click on the "Create a New Style" or "New Style" options, the box below comes up. In it, you can choose "Make a Custom Style (class);" "Redefine HTML Tag;" or "Use CSS Selector." The different options for each are explained below.
Creating a New Style
If you choose, "Make a Custom Style (class)" from the edit box,
you'll get the box below. In this box, you can set the styles for a
number of categories like type, background, block, box, border, list,
positioning. If you click on each of these, the right hand options
change to reflect the styles available for that category.
Redefine HTML Tag
To redefine an existing tag, instead of applying a particular class,
use the "Redefine HTML Tag" Option. From the top drop-down menu, pick
the tag. Click the "OK" button and a new menu comes up.
The new menu is shown in the image below. The menu is the same as the menu for creating a new class style. For clarity, the top bar shows what the menu is being used for in each case.
Use CSS Selector
The CSS Selector allows you to define how hyperlinks behave, like
making links have underlines, and then when the mouse moves over them,
having the underlines disappear. The options for this are:
a:hover
a:link
a:visited
a:active
Once you click "OK," you'll go back to the regular Editing Window (which is the image above this text), and you can choose how you want the text to appear.
To edit an existing style, you'll click on the "edit" button from the Main CSS Menu. Then, the box below appears. In this box, click on the style name and click edit. Then, a new box will appear and you'll click on the category of the style and click on edit to edit that style. You'll go through the same menu and options as for creating new styles.
You can also set CSS IDs and classes in Design Mode by clicking on the tags in the lower right hand side of the screen as shown in the image below.
Using Dreamweaver, you can convert CSS with layers and extensive CSS notes into a plain HTML file by clicking on File - Convert - 3.0 Browser Compatible. This will pop the converted file into a new window, so you can keep both versions of the file for use with different browsers. This can be used in combination with a Javascript web browser detection to make sure that your pages are viewable, but the best method is to not rely too heavily on anything other than the widely supported CSS1 (this includes not relying on CSS2, extensive DIVs or layers - see the NWE pages for more information on CSS).
For questions related to how CSS works, or how to hands-on edit the style, please see the NWE CSS help pages.