Link to an external CSS style sheet

Learn how you can reduce your editing effort and time by linking Dreamweaver web pages to a common, 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 Designer by doing one of the following:

    • Select Window > CSS Designer.
    • Press Shift + F11.
  2. In the CSS Designer, click the + icon next to Sources, and select Attach Existing CSS File.

    Attach existing CSS file
    Attach existing CSS file

  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

  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.
Adobe logo

Sign in to your account