Learn how to use the CSS Designer panel to create or attach stylesheets, media queries, selectors, and set CSS properties.
CSS Designer panel (Window > CSS Designer) is a CSS Property Inspector that lets you "visually"create CSS styles, files, and set properties, along with media queries.
The following sections are available in the CSS Designer interface:
Using the CSS Designer, you can edit an individual rule in a CSS style sheet (use the Current tab in the CSS Designer), or if you prefer, you can work directly in the CSS style sheet (use the All tab in the CSS Designer).
In the Sources pane of the CSS Designer panel, click 
, and then click one of the following options:
Based on the option you choose, Create A New CSS File or Attach Existing CSS File dialog boxes appear.
Click Browse to specify the name of the CSS file and, if you are creating a CSS, the location to save the new file.
Do one of the following:
(Optional) Click Conditional Usage and specify the media query that you want to associate with the CSS file.
In the CSS Designer panel, click a CSS Source in the Sources pane.
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.
Select the Conditions as per your requirements.
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 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.
In the CSS Designer panel, select a CSS source in the Sources pane or a media query in the @Media pane.
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:
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.
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:
Click the required selector and drag it to the new position with the Selectors pane.
The properties are grouped into the following categories and are represented by different icons at the top of the Properties pane:
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.
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.
Overridden properties are indicated using a strikethrough format.
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, as shown in this example.
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.
Border Control properties are organized into logical tabs to help you quickly view or modify the 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.
The code that is inserted is based on the preference setting for shorthand or longhand.
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.
The Disable/Enable CSS Property feature lets you comment out portions of CSS from the CSS Designer 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.
You can disable or delete each property using the CSS Designer.
The following screenshot shows the disable and delete icons for the height property. These icons are visible when you hover your mouse on the property.
You can also use the delete and disable controls at the Border Control group level to apply these actions to all the properties.
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 |
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.
To lock-in the highlight for the elements, click the Selector. The elements now are highlighted with a blue border.
To remove the blue highlight around the elements, the Selector again.
Live Highlight is enabled by default. To disable Live Highlight, click Live View options in Document Toolbar and click Disable Live Highlight.
When you edit an external CSS style sheet, all documents linked to that CSS style sheet are updated to reflect those edits.
You can export the CSS styles found in a document to create a new CSS style sheet, and attach or link to an external style sheet to apply the styles found there.
You can attach to your pages any style sheet that you create or copy into your site.
Open the CSS Designer by doing one of the following:
In the CSS Designer, click the + icon next to Sources, and select Attach Existing CSS File.
Do one of the following:
Click the Preview button to verify that the style sheet applies the styles you want to the current page.
If the styles applied are not what you expect them to be, click Cancel to remove the style sheet. The page will revert to its previous appearance.
Click OK.
