Share via

Attach or detach an external cascading style sheet

  • Article

When you want one or more web pages to use the styles that you've defined in an external cascading style sheet (CSS), you must attach the external CSS to those web pages. You can attach an external CSS to a single web page by dragging the .css file onto the open page in Design view. When you want to attach the external CSS to multiple pages or to another external CSS, or when the external CSS is located outside your site, you can use the Attach Style Sheet dialog box instead.

When you no longer want a web page to use the styles of an attached external CSS, you can detach the CSS from that page in one step by using the Apply Styles or Manage Styles panel. When you want to detach an external CSS from multiple web pages or a whole site, you can use the Manage Style Sheet Links dialog box instead.

Important

Detaching an external CSS from a web page doesn't remove references in your web page to the styles of that external CSS; you must remove the style references yourself. You may find it easier to find style references before you detach the CSS. For more information, see Remove a style from content.

To attach an external CSS to a web page by dragging and dropping

  1. Open the web page in Design view.

  2. Drag the .css file from either the Folder List panel or the Site View onto the page.

To attach an external CSS to one or more web pages or to a .css file

  1. To select the files that you want to attach the CSS to, do one of the following:

    • To attach the CSS to a single web page, open the web page.

    • To attach the CSS to all web pages in a site, open the site.

    • To attach the CSS to multiple pages, in the Folder List panel or Site View, select the web pages that you want to use the CSS.

    • To attach the CSS to all the pages in a folder, in the Folder List panel or the Folders view of the Site View view, select the folder.

    • To attach the CSS to a different .css file, open the .css file to which you want to attach the CSS.

  2. Do one of the following:

    • On the Format menu, point to CSS Styles, and then click Attach Style Sheet Cc295288.5d809b90-3fca-43d8-a746-7ed01a162578(en-us,Expression.40).png.

    • In the Apply Styles or the Manage Styles panel, click Attach Style SheetCc295288.5d809b90-3fca-43d8-a746-7ed01a162578(en-us,Expression.40).png.

  3. In the Attach Style Sheet dialog box, do the following:

    Use this To do this

    URL

    Specify the .css file and its path.

    Attach to

    Select the pages to attach the CSS to:

    • Current page: only the open web page.

    • All HTML Pages: all pages in the open site.

    • Selected page(s): only the web pages you've selected in the current site.

    Attach as

    Select the method of attachment:

    • Link: using the Link element.

    • Import: using the @import rule.

To detach an external CSS from a web page

  1. Open the web page in either Design view or Code view.

  2. In the Apply Styles or the Manage Styles panel, right-click the name of the CSS file (for example, "ewd.css") and select Remove Link.

To detach a linked CSS from multiple web pages

  1. Do one of the following:

    • To detach a linked CSS from all pages in a site, open the site.

    • To detach a linked CSS from multiple web pages, select the web pages in the Folder List panel or the Site View.

  2. On the Format menu, point to CSS Styles, and then click Manage Style Sheet Links.

  3. In the URL list in the Link Style Sheet dialog box, click the name of the external cascading style sheet (CSS) that you want to detach.

    Note

    The Link Style Sheet dialog box lists only linked CSS files and not imported CSS files. You can detach an imported CSS from only one web page at a time by using the Apply Styles or the Manage Styles panel or by removing the associated @import rule from each web page in Code view.

  4. Click one of the following:

    • Current page detaches the CSS from only the current web page.

    • All Pages detaches the CSS from all pages in the current site.

    • Selected Page(s) detaches the CSS from only the pages you've selected in the current site.

  5. Click Remove, and then click OK.

To detach an imported external CSS from a .css file

  1. Open the .css file that contains the imported CSS.

  2. Delete the @import rule that references the CSS file that you want to detach.

See also

Tasks

Create a cascading style sheet

Concepts

Controlling appearances with styles
Cascading style sheet reference
@import

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.