When you want one or more Web pages to use the styles that you've defined in an external cascading style sheet (CSS), you need to attach the external CSS to those Web pages.

You can attach an external CSS to a single Web page simply 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 of your site, you can use the Attach Style Sheet dialog box instead.

• Attach an external CSS to a Web page by dragging it

• Attach an external CSS to one or more Web pages or a .css file

• Detach an external CSS

Attach an external CSS to a Web page by dragging it

1. Open the Web page in Design view.
2. Drag the .css file from the Folder List onto the page.

 Top of Page

Attach an external CSS to one or more Web pages or 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, select the Web pages to which you want to attach the CSS.

      Tip   To select multiple files, press and hold down CTRL while you click them.

   • To attach the CSS to a different .css file, open the .css file to which you want to attach the CSS.
2. On the Format menu, point to CSS Styles, and then click Attach Style Sheet .

    Note   If this command is unavailable, check whether the current page is attached to a master page. You may need to open the master page instead.

    Tip   You can also use the Attach Style Sheet button in the Apply Styles or Manage Styles task pane or on the Style toolbar.

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

   Use this	To do this
   URL	Specify the .css file.
   Attach to	Select the pages to attach the CSS to: Current page: only the open Web page. All HTML Pages: all HTML 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.

 Top of Page

Detach an external CSS

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 an entire 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 to its styles from your Web pages. If you want to remove those references, do so before you detach your CSS. For more information on removing styles, see the article Remove or delete a style.

Detach an external CSS from a Web page

1. Open the Web page in Design view or Code view.
2. In the Apply Styles or Manage Styles task pane, right-click the CSS file's name, and then click Remove Link.

    Note   If this command is unavailable, check whether the current page is attached to a master page. You may need to open the master page instead.

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.
2. On the Format menu, point to CSS Styles, and then click Manage Style Sheet Links.

    Note   If this command is unavailable, check whether the current page is attached to a master page. You may need to open the master page instead.

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

    Note   Only linked CSS files appear here — not imported CSS files. You can detach an imported CSS from only one Web page at a time by using the Apply Styles or 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 site.
   • Selected page(s) detaches the CSS from only the pages you've selected in the current site.
5. Click Remove.

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.

 Top of Page