Linking to or importing an external CSS style sheet

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, of course, attach to your pages any style sheet that you create or copy into your site. In addition, Dreamweaver is shipped with prebuilt style sheets that can be automatically moved into your site and attached to your pages. For information about using the design style sheets that come with Dreamweaver, see Creating a document based on a Dreamweaver design file.

For information about applying a style, see Applying a Class style.

To link to or import an external CSS style sheet:

Open the CSS Styles panel by doing one of the following:

Select Window > CSS Styles.
Press Shift + F11.

In the CSS Styles panel, click the Attach Style Sheet button.

The Attach External Style Sheet dialog box appears.

In the Attach External Style Sheet dialog box, do one of the following:

Click Browse to browse to an external CSS style sheet.
Type the path to the style sheet in the File/URL box.

In Add As, select one of the options:

To create a link between the current document and an external style sheet, select Link. This creates a link href tag in the HTML code, and references the URL where the published style sheet is located. This method is supported by both Microsoft Internet Explorer and Netscape Navigator.
You cannot use a link tag to add a reference from one external style sheet to another. If you want to nest style sheets, you must use an import directive. Some but not all browsers also recognize the import directive within a page (rather than just within style sheets). There are subtle differences in how conflicting properties are resolved when overlapping rules exist within external style sheets that are linked versus imported to a page. If you want to import, rather than link to, an external style sheet, select Import.

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.

The name of the external CSS style sheet appears in the CSS Styles panel and custom (class) styles are preceded by the external style sheet identifier.

Exporting styles to create a CSS style sheet

You can export styles from a document to create a new CSS style sheet. You can then link to other documents to apply these styles.

To export CSS styles from a document and create a CSS style sheet:

Select File > Export > CSS Styles or select Text > CSS Styles > Export.

The Export Styles as CSS File dialog box appears.

Enter a name for your style sheet and click Save.

The style is saved as a CSS style sheet.

Editing a CSS style sheet

A CSS style sheet typically includes one or more styles. You can edit an individual style in a CSS style sheet (see Editing a CSS style), but sometimes you may want to edit several styles.

The Edit Style Sheet dialog box lets you work with style sheets in a number of ways. Use it to link to an external CSS style sheet, create a new CSS style sheet, edit an existing CSS style sheet, or to duplicate or remove a CSS style sheet.

To edit a CSS style sheet:

In the CSS Styles panel, click the style sheet you want to edit to select it, then do one of the following:

Click the Edit Style Sheets button located at the bottom of the CSS Styles panel.
Right-click the style sheet, select Edit Style Sheet from the context menu, then in the dialog box that appears, select the style sheet you want to edit and click Edit.

The styles for the selected CSS style sheet appear in the dialog box.

In the dialog box, select the style you want to edit, then click Edit.

The CSS Style Definition dialog box appears.

Modify the styles as desired, then click OK.