Operation Manual

Inspect CSS in Live view

Inspect mode works together with Live View to help you quickly identify HTML elements and their associated CSS styles. With Inspect mode

turned on, you can hover over elements on your page to see the CSS box model attributes for any block-level element.

Note: For more information on the CSS box model, see the CSS 2.1 specification.

In addition to seeing a visual representation of the box model in Inspect mode, you can also use the CSS Styles panel as you hover over elements

in the Document window. When you have the CSS Styles panel open in Current mode and hover over an element on the page, the rules and

properties in the CSS Styles panel automatically update to show you the rules and properties for that element. Additionally, any view or panel

related to the element you’re hovering over updates as well (for example, Code view, the Tag selector, the Property inspector, and so on).

1. With your document open in the Document window, click the Inspect button (next to the Live View button in the Document

toolbar).

Note: If you’re not already in Live view, Inspect mode automatically enables it.

2. Hover over elements on the page to see the CSS box model. Inspect mode highlights different colors for the border, margin,

padding, and content.

3. (Optional) Press the left arrow on your computer keyboard to highlight the parent of the currently highlighted element. Press

the right arrow to return to highlighting for the child element.

4. (Optional) Click an element to lock a highlight selection.

Note: Clicking an element to lock a highlight selection turns off Inspect mode.

Adobe recommends

Have a tutorial you would like to

share?

Dreamweaver CS5 - CSS

Inspect

Scott Fegette, Dreamweaver Product Manager

Video tutorial taking you through CSS Inspect