Dreamweaver CS6: The Missing Manual

Manipulating Styles

As with anything in Dreamweaver, styles are easy enough to edit, delete, or duplicate; all you need is a map of the terrain.

Editing Styles

While building a website, you almost always continually refine your designs. That chartreuse color you assigned to the background of your pages may have looked great at 2 a.m., but it loses something in the light of day.

Fortunately, one of CSS’s greatest selling points is how easy it is to update a web-site’s formatting.

Note

Although this section focuses mainly on how to style your text, you also use CSS styles to add background colors, background images, borders, and to accurately position elements on a page. The next few chapters show you how to style links, images, tables, forms, and other page elements with CSS.

Dreamweaver provides many ways to edit styles:

• In the CSS Styles panel, select a style and then click the Edit Style button to open the Rule Definition window (this is the same window you used to create the style). Make your changes, and then click OK to return to the document window. Dreamweaver reformats the page to reflect your changes.

• Double-click the name of a style in the CSS panel to open the Rule Definition window. Actually, depending on a preference setting—or a setting someone else may have tweaked while using your computer—double-clicking a style in the CSS panel may display the—eek!—raw CSS code in Code view. To change this behavior, open the Preferences window (Ctrl+U [⌘-U]), click the CSS Styles category, ...