Edit a CSS rule from the CSS Styles panel

Note:

In Dreamweaver CC and later, CSS Styles panel is replaced with CSS Designer. For more information, see CSS Designer.

You can easily edit both internal and external rules that you have applied to a document.

When you edit a CSS style sheet that controls the text in your document, you instantly reformat all of the text controlled by that CSS style sheet. Edits to an external style sheet affect all the documents linked to it.

You can set an external editor to use for editing style sheets.

Edit a rule in the CSS Styles panel (Current mode)

  1. Open the CSS Styles panel by selecting Window > CSS Styles.
  2. Click the Current button at the top of the CSS Styles panel.
  3. Select a text element in the current page to display its properties.
  4. Do one of the following:
    • Double-click a property in the Summary for Selection pane to display the CSS Rule Definition dialog box, and then make your changes.

    • Select a property in the Summary for Selection pane, and then edit the property in the Properties pane below.

    • Select a rule in the Rules pane, and then edit the rule’s properties in the Properties pane below.

    Note:

    You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver preferences.

Edit a rule in the CSS Styles panel (All mode)

  1. Open the CSS Styles panel by selecting Window > CSS Styles.
  2. Click the All button at the top of the CSS Styles panel.
  3. Do one of the following:
    • Double-click a rule in the All Rules pane to display the CSS Rule Definition dialog box, and then make your changes.

    • Select a rule in the All Rules pane, and then edit the rule’s properties in the Properties pane below.

    • Select a rule in the All Rules pane, and then click the Edit Style button in the lower-right corner of the CSS Styles panel.

    Note:

    You can change the double-clicking behavior for editing CSS, as well as other behaviors, by changing Dreamweaver preferences.

Change the name of a CSS selector

  1. In the CSS Styles panel (All mode) select the selector you want to change.
  2. Click the selector again to make the name editable.
  3. Make your changes and press Enter (Windows) or Return (Macintosh).

 Adobe

Get help faster and easier

New user?

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online