Format css code, Set css code formatting preferences, Format css code in a css style sheet manually – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 453: Format embedded css code manually
Format CSS code
Note: In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.
You can set preferences that control the format of your CSS code whenever you create or edit a CSS rule using the Dreamweaver interface. For
example, you can set preferences that will place all CSS properties on separate lines, place a blank line between CSS rules, and so on.
When you set CSS code formatting preferences, the preferences you select are automatically applied to all new CSS rules that you create. You
can, however, also apply these preferences manually to individual documents. This might be useful if you have an older HTML or CSS document
that needs formatting.
Note: CSS code formatting preferences apply to CSS rules in external or embedded style sheets only (not to in-line styles)
Set CSS code formatting preferences
1. Select Edit > Preferences.
2. In the Preferences dialog box, select the Code Format category.
3. Next to Advanced Formatting, click the CSS button.
4. In the CSS Source Format Options dialog box, select the options that you want to apply to your CSS source code. A preview of the CSS as
it would look according to the options you’ve selected appears in the Preview window below.
Indent Properties With Sets the indentation value for properties within a rule. You can specify tabs or spaces.
Each Property On A Separate Line Places each property within a rule on a separate line.
Opening Brace On Separate Line Places the opening brace for a rule on a separate line from the selector.
Only If More Than One Property Places single-property rules on the same line as the selector.
All Selectors For A Rule On Same Line Places all selectors for the rule on the same line.
Blank Line Between Rules Inserts a blank line between each rule.
5. Click OK.
Note: CSS code formatting also inherits the Line Break Type preference that you set in the Code Format category of the Preferences dialog box.
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.
More Help topics
446