In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.

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.


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).


    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.


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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy