Creation of Class Style in Adobe CS5 Dreamweaver - dummies

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Adobe Creative Suite 5 (Adobe CS5) Dreamweaver supports the creation of class styles to enable more precise control over your page formatting. You can create class selectors, which are named styles for body, text, headlines, subheads, and other elements. Unlike with tag selectors, you can choose just about any name for a class and apply its style selectively to items if and when you want.

You can also make your new rule available to more than one page in your site by defining a new external style sheet. This method saves your rules in an external file that can be attached to several pages at a time.

1Open New CSS Rule dialog box.

Locate the CSS panel, off to the right, and click the New CSS Rule button at the bottom or choose Format→CSS Styles→New.

2Choose Class (Can Apply to Any HTML Element).

This option is found in the Selector Type drop-down list.

3Name your new class.

In the Selector Name text box, enter a name for your new class. You can enter any name you want, but make sure that it has no spaces and is descriptive of how you’ll use it. Reallycoolstyle is a bad name; headlinestyle is a better name. Dreamweaver inserts the period at the front of the style name because it’s a necessary naming convention.

4Choose (New Stylesheet File).

This is an option in the Rule Definition drop-down list at the bottom. Click OK.

5The Save Style Sheet File As dialog box appears.

Locate your site folder (or if you haven’t defined a site, a folder where you’ll keep all relevant information, such as image files and pages for your site).

6Enter a name for the style sheet.

Enter an appropriate name, such as main.css or basic.css if it’s the main set of styles you’re creating for your website. (Dreamweaver will add the mandatory .css extension at the end of the filename.)

7Save your Style.

Leave the URL as is and the Relative To drop-down list set to Document. Click Save.

You’ve created a new .css file, or an external stylesheet. The CSS Rule Definition dialog box appears where you can further refine your new stylesheet.