What's the Difference Between @import and link for CSS?

Question: What's the Difference Between @import and link for CSS?

External style sheets are an important part of every Web designer's bag of tricks, but there are two ways to include them in your pages: @import and . How do you decide which method is better? This FAQ discusses the differences between the two methods, why you might use one over another, and how to decide.

Answer:

The Difference Between @import and

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.
- Linking is the first method for including an external style sheet on your Web pages. It is intended to link together your Web page with your style sheet. It is added to the of your H T M L document like this:

@import - Importing allows you to import one style sheet into another. This is slightly different than the link scenario, because you can import style sheets inside a linked style sheet. But if you include an @import in the head of your HTML document, it is written:

From a standards viewpoint, there is no difference between linking to an external style sheet or importing it. Either way is correct, and either way will work equally well (in most cases). But there are a few reasons you might want to use one over the other.

Why Use @import?

The most common reason given for using @import instead (or along with) is because older browsers didn't recognize @import, so you could hide styles from them. Specifically:

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72)
  

  @import url(../style.css);

• hides the style sheet from Netscape 4, IE 3 and 4 (not 4.72), Konqueror 2, and Amaya 5.1
  

  @import url("../style.css");

• hides the style sheet from Netscape 4, IE 6 and below
  

  @import url(../style.css) screen;

• hides the style sheet from Netscape 4, IE 4 and below, Konqueror 2
  

  @import "../styles.css";

Another use for the @import method is to use multiple style sheets on a page, but only one link in your . For example, a corporation might have a global style sheet for every page on the site, with sub-sections having additional styles that only apply to that sub-section. By linking to the sub-section style sheet and importing the global styles at the top of that style sheet, you don't have to maintain a gigantic style sheet with all the styles for the site and every sub-section. The only requirement is that any @import rules need to come before the rest of your style rules. And remember that inheritance can still be a problem.

Why Use ?

The number one reason for using linked style sheets is to provide alternate style sheets for your customers. Browsers like Firefox, Safari, and Opera support the rel="alternate stylesheet" attribute and when there is one available will allow viewers to switch between them. You can also use a JavaScript switcher to switch between style sheets in IE. This is most often used with Zoom Layouts for accessibility purposes.
One of the drawbacks to using @import is that if you have a very simple with just the @import rule in it, your pages may display a flash of unstyled content (FOUC) as they are loading. This can be jarring to your viewers. A simple fix to this is to make sure you have at least one additional or element in your .

What About the Media Type?

Many writers make the statement that you can use the media type to hide style sheets from older browsers. Often, they mention this as a benefit to using either @import or , but the truth is you can set the media type with either method, and browsers that don't support media types won't view them in either case. For example, Netscape 4 doesn't recognize media types, so you can use the link tag to hide a style sheet from that browser just as easily as the @import rule:

And some versions of IE (6 and below) don't support the media type on the @import rule, so you can use that to hide the style sheet from them:

So Which Method Should You Use?

Personally, I prefer to use and then import style sheets into my external style sheets. That way I only have 1 or 2 lines of code to adjust in my HTML documents. But the bottom line is that it's up to you. If you're more comfortable with @import, then go for it! Both methods are standards compliant and unless you're planning on supporting really old browsers (like Netscape 4) there's no strong reason for using either.