Inspect css in live view – Adobe Dreamweaver CC 2015 User Manual
Page 221
214
CSS
Last updated 6/3/2015
When you disable a CSS property, Dreamweaver adds CSS comment tags and a [disabled] label to the CSS property
you’ve disabled. You can then easily re-enable or delete the disabled CSS property according to your preference.
For a video overview from the Dreamweaver engineering team about working with CSS Disable/Enable, see
1
In the Properties pane of the CSS Styles panel (Window > CSS Styles), select the property you want to disable.
2
Click the Disable/Enable CSS Property icon in the lower-right corner of the Properties pane. The icon also appears
if you hover to the left of the property itself.
Once you click the Disable/Enable CSS Property icon, a Disabled icon appears to the left of the property. To re-
enable the property, click the Disabled icon, or right-click (Windows) or Control-click (Macintosh OS) the property
and select Enable.
3
(Optional) To enable or delete all of the disabled properties in a selected rule, right-click (Windows) or Control-click
(Macintosh OS) any rule or property in which properties are disabled, and selectEnable All Disabled in Selected
Rule, or Delete all Disabled in Selected rule.
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.
More Help topics