Dreamweaver CS6: The Missing Manual

Analyzing CSS with Dreamweaver

Dreamweaver’s CSS tools are as good as they come—you can use them to build complex designs without ever dipping your toe into code. You can manage complex style sheets easily, and quickly add external style sheets to your pages. But building and managing styles is only one part of the CSS puzzle. You also need to analyze what the CSS is doing to the tags on your page—to see why text, for example, is purple instead of the green you specified. Dreamweaver provides help for this as well.

As described on The Other Side of the CSS Styles Panel, the CSS Styles panel has two views: All and Current (see Figure 10-1). The All button is the best way to see all the styles you can draw on for the current document. When you select this button, you see not only the styles in the page itself (in an internal style sheet), but also the styles in all the external style sheets linked to the page.

Figure 10-1. The Current view of the CSS Styles panel is one of Dreamweaver’s best design tools. After you select a tag on a page, the Summary pane (top) lists all the properties that format your selection. Just below that, the Cascade pane (middle) lists all the styles affecting the selection. However, you only get the Cascade view if you select the Cascade button (the stair-step icon in the top-right of the middle pane). Make sure you do, since the other button (“Show information ...