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

Use one of two complimentary methods to load style sheets into your webpage

Young man studying in library
Johner Images/Johner Images/Getty Images

Different sites include their external Cascading Style Sheets in different ways—either by using the @import approach or by linking to that CSS file. What's the difference between @import and link for CSS, and how do you decided which one is better for you?

The Difference Between @import and <link>

Linking is the first method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. It is added to the head of your HTML document.

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.

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. However, there are a few reasons you might want to use one over the other.

Why Use @import?

Many years ago, the most common reason that was given for using @import instead (or along with) <link> is because older browsers didn't recognize @import, so you could hide styles from them. By importing your style sheets, you would essentially be making them available to more modern, standards-compliant browsers while "hiding" them from the older browser versions.

Another use for the @import method is to use multiple style sheets on a page, while only including a single link in your document's head. 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. Inheritance can still be a problem.

Why Use <link>?

The No. 1 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—most often used with Zoom Layouts for accessibility purposes.

One of the drawbacks to using @import is that if you have a very simple head with just the @import rule in it, your pages may display a "flash of unstyled content" as they are loading. A simple fix to this is to make sure you have at least one additional link or script element in your head.

What About the Media Type?

Many writers assert that you can use the media type to hide style sheets from older browsers. Often, they mention this idea as a benefit to using either @import or <link>, but you can set the media type with either method, and older browsers that don't support media types won't view them in either case. 

So Which Method Should You Use?

Most developers today use link and then import style sheets into external style sheets. That way, you only have one or two lines of code to adjust in your 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, there's no strong reason for using either.