Section 12.4. Editing a Style Rule

12.4. Editing a Style Rule

Once you've created a style rule, you may edit its definition at any time. You can change the values of the attributes that you defined previously, or you can add or delete attributes from the existing style.

BEHIND THE SCENES

There's a better way to add background colors to layout areas when these areas don't have a specific style rule. See Chapter 13 for details.

Assume that you want to add a background color to the style for the main content area. Here are the steps:

1. From the CSS Styles panel, click the All button if it isn't already selected.

2. From the list of style rules in the CSS Styles panel, click the name of the style for the main content area.

3. At the bottom of the CSS Styles panel, click the Edit Style button. This is the one with the pencil icon. The CSS Rule Definition dialog box appears, preloaded with the current attributes of the style.

4. You want to add a background color, so choose the Background category of the CSS Rule Definition dialog box.

5. Click the color square under Background, and choose a background color from the menu of color swatches that appears.

6. Click OK. Figure 12-14 shows that Dreamweaver adds the style to the stylesheet and simultaneously updates the template document window, because the main content area is already set up to receive this style.

   Figure 12-14. Add a background color to the main content area by editing its style rule

   

7. Switch to the document window for the CSS file, and choose File Save. Then switch back to the templates document window. You don't have to save the template this time, because not a single byte of code has changed. Your edit affected the CSS file, not the template file.

TIP

To delete a style rule, select it from the list in the CSS Styles panel, and then click the trashcan icon at the bottom of the panel. Be sure to save your external CSS file afterwards.