Dreamweaver CS5: The Missing Manual

Using the Code Navigator

Dreamweaver includes yet another valuable CSS tool, this one aimed at CSS pros who like to use Code View when they write and edit CSS. The Code Navigator gives you a quick way to see all the CSS styles applied to any element you click on. It’s kind of like the Rules Pane of the CSS Styles panel (discussed in the previous section), but the CSS styles appear in a pop-up menu directly in the document window (see Figure 8-11).

To access the Code Navigator, hold down the Alt key and click an element on the page (Mac owners need to press ⌘-Option and click). You can click any element whose CSS you wish to examine: an image, a heading, a paragraph, a table, and so on. For example, in Figure 8-11, clicking ⌘-Option and the “Tips” headline (that would be Alt-click for Windows) opened the Code Navigator, which lists the styles that apply to that headline.

Figure 8-10. Selecting the Current view of the CSS Styles panel lets you easily view all the properties applied to the currently selected item—in this example it’s the headline (an <h2> tag) pictured at top. A line (circled in the left corner of the panel below) strikes out properties from a style that don’t apply to the headline. In this case, the font-size and color properties in the.highlight class style override the same properties in the less specific h2 style (bottom left).

There are several other ways to access ...