Inspect css in live view – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 183
Inspect CSS in Live view
Note: 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.
Note: For more information on the CSS box model, see the
.
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
Scott Fegette, Dreamweaver Product
Manager
Video tutorial taking you through CSS
Inspect
More Help topics
176