Difference between @import and link in CSS

In theory, the only difference between them is that @import is the CSS mechanism to include a style sheet and <link> the HTML mechanism. However, browsers handle them differently, giving <link> a clear advantage in terms of performance.

Steve Souders wrote an extensive blog post comparing the impact of both <link> and @import (and all sorts of combinations of them) called "don’t use @import". That title pretty much speaks for itself.

Yahoo! also mentions it as one of their performance best practices (co-authored by Steve Souders): Choose <link> over @import

Also, using the <link> tag allows you to define "preferred" and alternate stylesheets. You can't do that with @import.

No real difference today, but @import is not handled correctly by older browsers (Netscape 4, etc.), so the @import hack can be used to hide CSS 2 rules from these old browsers.

Again, unless you're supporting really old browsers, there isn't a difference.

If I were you, however, I'd use the <link> variant on your HTML pages, because it allows you to specify things like media type (print, screen, etc.).