Dreamweaver

Link to 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 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.

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

    • Select Window > CSS Styles.

    • Press Shift + F11.

  2. In the CSS Styles panel, click the Attach Style Sheet button. (It’s in the lower-right corner of the panel.)
  3. 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.

  4. For 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. Most 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.

  5. In the Media pop‑up menu, specify the target medium for the style sheet.

    For more information on media-dependent style sheets, see the World Wide Web Consortium website at www.w3.org/TR/CSS21/media.html.

  6. 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.

  7. Click OK.