Adobe Dreamweaver CC 2015 - Manual (Page 53)

46
Workspace and workflow
Last updated 6/3/2015
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.
Note: 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.