O'Reilly logo

Dreamweaver MX: The Missing Manual by David Sawyer McFarland

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Manipulating Styles

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

Editing Styles

While building a Web site, you 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 makes updating the formatting on a Web site.

Tip

Although this section talks mostly about text styling, you can also use CSS styles to add background colors, background images, borders, and accurate positioning that can apply to images, table cells, and other page elements. For an example of a CSS style applied to an image, see the tutorial on page 270.

Dreamweaver MX provides two main ways to edit styles: using either the Edit Styles view of the CSS Styles panel or the Edit Style Sheet window.

The quick, new way is to click the Edit Styles button on the CSS Styles panel (see Figure 8-6). You get a list of all styles available to the current Web page, including internal and external style sheets, and HTML tag styles. Double-click the name of the style to open the Style Definition window (Figure 8-3). This is the same window you used when first creating the style. Make your changes to the style, and then click OK.

Internal styles are listed at the top under the name of the document—index.html, in this case. Styles contained in an external style sheet appear under the name of the CSS file: global.css. Unlike the Apply Styles view, which only shows custom styles, the Edit Styles view shows all styles, including HTML tag styles and other CSS selectors (see page 239). The formatting properties of the style are listed in the right hand column. For example, the HTML tag style for the <p> tag uses the font Verdana set to 12 pixels tall. Click the expand/collapse button to show or hide the styles for the internal or external style sheet.

Figure 8-6.  Internal styles are listed at the top ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required