Adobe Dreamweaver CC 2014 v.13 - Manual (Page 215)

To the top
Note:
To the top
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 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. By default, the selector is 'More Specific'. You can edit the selector to make it 'Less Specific'.
Unlike the CSS Styles panel, you cannot directly select a Selector Type in CSS Designer. You have to 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 '#'.
208