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 website, 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 task pane. When you want to detach an external CSS from multiple web pages or a whole website, 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 task pane or the Web Site window 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 website, open the website.

    • To attach the CSS to multiple pages, in the Folder List task pane or Web 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 task pane or the Folders view of theWeb Site 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 SheetCc295288.bf95e242-c256-4ab9-887c-a491c1597f79(en-us,Expression.10).gif.

    • In the Apply Styles or the Manage Styles task pane, click Attach Style SheetCc295288.bf95e242-c256-4ab9-887c-a491c1597f79(en-us,Expression.10).gif.

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

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

    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 task pane, 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 website, open the website.

    • To detach a linked CSS from multiple web pages, select the web pages in the Folder List task pane or the Web 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 task pane 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 website.

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

  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

Concepts

Create a cascading style sheet

Cascading style sheets overview