Dreamweaver

Format CSS code

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.