O'Reilly logo

Dreamweaver 8: 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

Creating Styles

You begin most CSS-related tasks in the CSS Styles panel, which is the command center for creating styles (see Figure 6-1). To open it, choose Window CSS Styles (or press Shift+F11).

Note

Dreamweaver 8 introduces significant changes to how you create and use styles. The CSS Styles panel has two views ("All" as shown in Figure 6-1, and "Current," described on Section 6.5). It also incorporates a Properties list with which you can quickly edit CSS styles. (This was called the "Rule Inspector" in Dreamweaver MX 2004.)

With the "All" button selected, the CSS Styles panel lists the names of all styles available to the current page, including those in both external and internal style sheets. In this example, one external style sheet—headlines.css—contains seven styles. The first two styles are tag styles (notice that the names match various HTML tags), while the next five are class styles (note the period at the beginning). There's also one tag style defined in an internal style sheet—the one listed below "<style>." Click the minus (–) icon (arrow on Mac) to the left of the style sheet to collapse the list of styles, hiding them from view. The "Properties" list in the bottom half of the panel lets you edit a style as described on Section 6.4.2; the three buttons at the bottom left of the panel (circled) control how the property list is displayed.

Figure 6-1. With the "All" button selected, the CSS Styles panel lists the names of all styles available to the current page, including those in both external and internal style sheets. In this example, one external style sheet—headlines.css—contains seven styles. The first two styles are tag styles (notice that the names match various HTML tags), while the next five are class styles (note the period at the beginning). There's also one tag style defined in an internal style sheet—the one listed below "<style>." Click the minus (–) icon (arrow on Mac) to the left of the style sheet to collapse the list of styles, hiding them from view. The "Properties" list in the bottom half of the panel lets you edit a style as described on Section 6.4.2; the three buttons at the bottom left of the panel (circled) control how the property list is displayed.

Phase 1: Set Up ...

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