In my CSS3 opinion articles I like to mention or discuss some of the choices that web designers and web developers have to make, such as: Do I use the <link> tag or go with @import in my style tags?
In my opinion remote including any .css file is the way to go, versus importing them on top of the existing css code.
<link> is widely supported, unlike @import. The old @import was preferred during the HTML4 because it was a little hack to prevent certain style from being loaded by browsers such as Netscape. I find this an invalid method of doing things, and since I am thinking forward and not backward, my choice is <link>.
Using @import might mean that on certain browsers you might see an unstyled version very briefly, before the page is done loading. Having at least one <link> in the header will prevent this. Might as well fix this by going with <link> from the get go.
At any point, when using <link> you can still use @import to put additional css inside the linked css file.
What I also like about <link> is that you can local and remote call files. Which is great when you’re working on a bigger project and there’s a CDN where you can remote store static files, such as .css.
For ages I have been using <link> over @import, and it’s the method I am continue to move forward with; And I recommend you to consider making this decision as well.
Linking to a style sheet means a clean .html page, re-usable code by other .html pages, and faster page loads due to it being cached. Together with the ability to remote call the .css file it’s a great way to add a design to your markup (layout).
<link> is used inside the <head> .. </head> tags.
<link rel="stylesheet" type="text/css" href="style.css" />