Operation Manual

139
USING DREAMWEAVER
Creating pages with CSS
Last updated 3/28/2012
Format CSS code in a CSS style sheet manually
1 Open a CSS style sheet.
2 Select Commands > Apply Source Formatting.
The formatting options you set in CSS code formatting preferences are applied to the entire document. You cannot
format individual selections.
Format embedded CSS code manually
1 Open an HTML page that contains CSS embedded in the head of the document.
2 Select any part of the CSS code.
3 Select Commands > Apply Source Formatting To Selection.
The formatting options you set in CSS code formatting preferences are applied to all CSS rules in the head of the
document only.
Note: You can select Commands > Apply Source Formatting to format the entire document according to your specified
code formatting preferences.
Disable/Enable CSS
The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Styles panel, without
having to make changes directly in the code. When you comment out portions of the CSS, you can see what kinds of
effects particular properties and values have on your page.
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
www.adobe.com/go/dwcs5css_en.
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
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.