About the CSS Designer panel

CSS Designer panel (Windows > CSS Designer) is a CSS Property Inspector that lets you "visually"create CSS styles, files, and set properties, along with media queries.

CSS Designer for applying CSS properties
CSS Designer panel

You can use Ctrl/Cmd+ Z to undo or Ctrl/Cmd + Y to redo all actions you perform in CSS Designer. The changes are automatically reflected in Live View and the relevant CSS file is also refreshed. To let you know that the related file has changed, the affected file’s tab is highlighted for a while (around 8 seconds).

The CSS Designer panel consists of the following panes and options:


Lists all the CSS, media queries, and selectors associated with the current document. You can filter for the required CSS rules and modify the properties. You can also use this mode to begin creating selectors or media queries.

This mode is not sensitive to the selection. This means, when you select an element on the page, the associated selector, media query, or CSS are not highlighted in CSS Designer.


Lists all the computed styles for any selected element in Design or Live view of the current document. When you use this mode for a CSS file in Code view, all the properties for the selector in focus are displayed.

This mode is context-sensitive. Use this option to edit the properties of selectors associated with selected elements in the document.


Lists all the CSS style sheets associated with the document. Using this pane, you can create and attach a CSS to the document, or define styles within the document.


Lists all the media queries in the source selected in the Sources pane. If you do not select a specific CSS, this pane displays all the media queries associated with the document.


Lists all the selectors in the source selected in the Sources pane. If you also select a media query, this pane narrows down the list of selectors for that media query. If no CSS or media queries are selected, this pane displays all the selectors in the document.

When you select Global in the @Media pane, all the selectors that are not included in a media query of the selected source are displayed.


Displays properties that you can set for the specified selector. For more information, see Set properties.

If you collapse or expand the panes in CSS Designer, the sizes of the panes are remembered within a session. Sources and Media panes stick to the customized sizes until you change their sizes again.


When you select a page element, the most specific Selector is selected in the Selectors pane. To view the properties of a specific Selector, click the name of that Selector in the pane.

To view all the selectors, you can choose All Sources in the Sources pane. To view selectors that do not belong to any media query in the selected source, click Global in the @Media pane.

Create and attach style sheets

  1. In the Sources pane of the CSS Designer panel, click , and then click one of the following options:

    • Create a New CSS File: To create and attach a new CSS file to the document
    • Attach Existing CSS File: To attach an existing CSS file to the document
    • Define in Page: To define a CSS within the document

    Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes appear.

  2. Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file.

  3. Do one of the following:

    • Click Link to link the Dreamweaver document with the CSS file
    • Click Import to import the CSS file into the document.
  4. (Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file.

Define media queries

  1. In the CSS Designer panel, click a CSS Source in the Sources pane.

  2. Click in the @Media pane to add a new media query.

    The Define Media Query dialog box appears and lists all the media query conditions supported by Dreamweaver.

  3. Select the Conditions as per your requirements. For detailed information on the media queries, see this article.

    Ensure that you specify valid values for all the conditions you select. Else, corresponding media queries do not get created successfully.


    Only 'And' operation is supported currently for multiple conditions.

If you add media query conditions through code, only the supported conditions are populated in the Define Media Query dialog box. The Code text box in the dialog box, however, displays the code completely (including unsupported conditions).

If you click on a media query in the Design/Live view, the viewport switches to match the selected media query. To view the full size viewport, click Global in the @Media pane.

Define CSS Selectors

  1. In the CSS Designer, select a CSS source in the Sources pane or a media query in the @Media pane.

  2. In the Selectors pane, click . Based on the element selected in the document, CSS Designer smartly identifies and prompts you with the relevant selector (upto three rules).

    You can do one or more of the following:

    • Use the up or down arrow keys to make the suggested selector more specific or less specific.
    • Delete the suggested rule and type the required selector. Ensure that you type the name of the selector along with the denotion for the Selector Type. For example, if you are specifying an ID, prefix the name of the selector with a '#'.
    • To search for a specific selector, use the search box at the top of the pane.
    • To rename a selector, click the selector, and type the required name.
    • To reorganize the selectors, drag the selectors to the required position.
    • To move a selector from one source to another, drag the selector to the required source in the Source pane.
    • To duplicate a selector in the selected source, right-click the selector, and click Duplicate.
    • To duplicate a selector and add it into a media query, right-click the selector, hover the mouse over Duplicate Into Media Query, and then choose the media query.

    Note: The Duplicate Into Media Query option is available only when the source of the selected Selector contains media queries. You cannot duplicate a Selector from one source into a media query of another source.

Copy-paste styles

You can now copy styles from one selector and paste into another. You can copy all styles or copy only specific category of styles such as Layout, Text, and Border. 

Right-click a selector and choose from the available options:

Copy styles using CSS Designer
Copy styles using CSS Designer

  • If a selector has no styles, Copy and Copy All Styles are disabled.
  • Paste Styles is disabled for remote sites that cannot be edited. But Copy and Copy All
    styles is available.
  • Pasting Styles that already exist partially on a selector (Overlapping) works. Union
    of all the selectors is pasted.
  • Copy-paste Styles also works for different linkages of CSS files – Import, Link, Inline

Rearrange selectors

Click the required selector and drag it to the new position with the Selectors pane.

Set CSS properties

The properties are grouped into the following categories and are represented by different icons at the top of the Properties pane:

  • Layout
  • Text
  • Border
  • Background
  • Others (list of 'text only' properties and not properties with visual controls)


Before editing the properties of a CSS Selector, identify the elements associated with the CSS Selector using Reverse Inspect. By doing so, you can evaluate if all the elements highlighted during Reverse Inspect actually require the changes. See link for more information on Reverse Inspect.

Select the Show Set check box to view only the set properties. To view all the properties that you can specify for a selector, deselect the Show Set check box.

To set a property, such as, width or border-collapse, click the required options displayed adjacent to the property in the Properties pane. For information on setting gradient background or box controls such as margins, padding, and position, see the following links:

Overridden properties are indicated using a strikethrough format.

Set margins, padding, and position

Using the box controls in CSS Designer's Properties pane, you can quickly set the margins, padding, and position properties. If you prefer code, you can specify shorthand code for margin and padding in the quick edit boxes.

margin property
'margin' property

position property
'position' property

Padding property
'padding' property

Click the values and type the required value. If you want all the four values to be the same and changed simultaneously, click the link icon ()at the center.

At any point in time, you can disable () or delete () specific values, for example, left margin value while retaining the right, top, and bottom values.

link icon in margin
Disable, delete, and link icons for margins

Set border properties

Border Control properties are organized into logical tabs to help you quickly view or modify the properties. 

Border properties

If you prefer code, you can specify shorthand code for borders and border radius in the quick edit text box.

To specify the Border Control properties, first set the properties in the 'All Sides' tab. The other tabs are then enabled and the properties set in the 'All Sides' tab are reflected for individual borders.

When you change a property in the individual border tabs, the value of the corresponding property in the 'All Sides' tab changes to 'undefined' (default value). 

In the example below, the border color was set to black and then changed to red for the Top border. 

Border on all sides

Border color set to black for all sides 

Border color set to red for top

The code that is inserted is based on the preference setting for shorthand or longhand. 

Delete and disable controls are available for individual properties as before Dreamweaver CC 2014. Now, you can use the delete and disable controls at the Border Control group level to apply these actions to all the properties.

Border top options
Border top options

During Inspect, the tabs are focused based on the priority of the "set" tabs. The highest priority is for "All sides" tab followed by "Top", "Right", "Bottom" and "Left". For example, if only the top value for a border is set, the computed mode takes the focus to the "Top" tab ignoring the "All sides" tab because "All sides" tab is not set.

Disable or delete properties

The CSS Designer panel lets you disable or delete each property. The following screenshot shows the disable () and delete () icons for the width property. These icons are visible when you hover your mouse on the property.

Disable/delete property
Disable/delete property

Keyboard shortcuts

You can add or delete CSS selectors and properties using keyboard shortcuts. You can also navigate between the property groups in the Properties pane.  

Shortcut Workflow
CTRL + Alt +[Shift =] Adds Selector (If control is in the selector section)
CTRL + Alt+ S Add Selector (If control is anywhere in the application)
CTRL + Alt +[Shift =] Adds Property (If control is in the property section)
CTRL + Alt+ P Adds Property (If control is anywhere in the application)
Select + Delete Deletes selector, if selector is selected
CTRL + Alt + (PgUp/PgDn) Jump between sections while in the properties subpanel 

Identify page elements associated with a CSS Selector (13.1)

Most often, a single CSS Selector is associated with multiple page elements. For example, text in the main content of a page, header, and footer text can all be associated with the same CSS Selector. When you edit the properties of the CSS Selector, all the elements associated with the Selector are affected, including the ones that you do not intend to change.

Live Highlight helps you identify all the elements associated with a CSS Selector. If you want to change only one elment or some of the elements, you can create a new CSS Selector for those elements, and then edit the properties.

To identify the page elements associated with a CSS Selector, hover your mouse over the Selector in Live View (with Live Code 'off'). Dreamweaver highlights the associated elements with dotted lines.

Identify page elements associated with a CSS selector (13.1)

To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border.

Identify page elements associated with a CSS selector (13.1)

To remove the blue highlight around the elements, the Selector again.


The following table summarizes the scenarios where Live Highlight is not available.

Mode Live Code Live Highlight displayed?
Code NA NA
Design NA NA
Live ON
(button is pressed)
  OFF Yes

Disable Live Highlight

Live Highlight is enabled by default. To disable Live Highlight, click Live View options in Document Toolbar and click Disable Live Highlight. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy