Attach or detach an external cascading style sheet

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.

What do you want to do?

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

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

Share Facebook Facebook Twitter Twitter Email Email

Was this information helpful?

Great! Any other feedback?

How can we improve it?

Thank you for your feedback!

×