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

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

If you've taken a look around the Web and viewed the code of various web pages, one thing you may have noticed is that different sites include their external CSS files 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 to you decided which one is better for you? Let's take a look!

The Difference Between @import and <link>

Before deciding which method to use to include your style sheets, you should understand what the two methods were intended to be used for.

<link> - 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 <head> of your HTML document like this:

<link href="styles.css" rel="stylesheet">

@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. If you include an @import in the head of your HTML document, it is written like this:

<style type="text/css">@import url("styles.css");</style>

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. Also, be sure to remember that inheritance can still be a problem.

Why Use <link>?

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 <head> 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 <link> or <script> element in your <head>.

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 <link>, but the truth is 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?

Personally, I prefer to use <link> and then import style sheets into my external style sheets, as do most web designers today. 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, there's no strong reason for using either.

Edited by Jeremy Girard on 2/7/17