Dreamweaver CS5: 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 in a style. 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 of the styles the current document has access to. When you select this button, you see not only styles in the page itself (inside an internal style sheet), but also the styles in all external style sheets linked to the page.

The Current view, however, is where you can start to analyze how styles affect a particular tag on a page. As you read on More about CSS, tags can inherit properties (like color and font) from tags that wrap around them. For example, if you create a body tag style with a color property of #F00, a browser displays the text inside the body (and even text inside other tags, such as <p>, <h1>, and <li> tags) as red. In other words, the styling of any one tag may be a combination of properties from multiple styles. The final set of properties that format a tag result from the ...