There are two ways to load a stylesheet into your HTML document. One uses a "link" command, and the other an "@import" command. Which should you use? Is there a difference between the two commands?
First, the link command , in your HTML document, in the header at the top of the page, is where you place "link" commands, and it looks like this:
You can have as many links as you want, but they all must be placed in the head section of your HTML document. CSS files are then added to your HTML document in the order they were listed in the header section.
The "rel" command tells HTML what it's loading, in this case a stylesheet. The "type" tells HTML how to parse the contents of the file, when it opens the document. I know it seems redundant, but both are used.
The "media" tag is important. It tells HTML when to use the stylesheet. If you only want to style your printer output, use "print" as the media type, and the only time that styling will be used is when the document is printed. You can have more than one media type separated with a comma. Possible values for the media tag are: all, aural, braille, embossed, handheld, print, projection, screen, tty, and tv.
Now, the @import command, that looks like this, if placed in the head section of the HTML document:
The @import tag, however, is normally used inside another CSS stylesheet file, that is then used to load more than one additional CSS files, like so:
@import url(../css/topmenu.css); @import url(../css/sidebar.css); @import url(../css/footer.css);
The first CSS file is loaded with the "link" or "@import" command from the header section of the HTML page, and after that CSS file is open, it would then load the other import CSS files. The rule for @import, when used in a CSS file, is that it must appear at the top of the page before any other CSS tag. If the @import tag is placed after another CSS tag it is ignored, and you'll find your styles won't load.
You may have picked up that there is no media tag with the @import command when inside a CSS file, you'd be correct, which is one of the difference between "link" and having @import within the CSS file. If you want separate media types for CSS files, then you should load them with a media tag in the HTML header section.
The other difference between the two is subtle, the "link" tag is an HTML tag and must appear in the HTML page in the header section. The "@import" tag, on the other hand, is a CSS tag, and thus, must have the "style" tags around it in the HTML page, or be embedded at the top of a CSS file.
So which one do you use?
Designers some times like a nice clean look to their HTML pages. They like to link in one style sheet, usually called "style.css," and then, in that style sheet, @import all the other style sheets for the page. The result is one line in the header section of the HTML page, nice and neat.
However, there are two problems, in doing that, to consider. Older browsers, when you use @import in the CSS file, especially IE, may load your CSS files out of order. Because of the nature of the CSS cascade, the order in which style sheets load is important, as to which style will be used for a particular tag. This will cause the designer a problem during development when he can't figure out why the styles for a particular tag are not working, or why the styles work in one browser and not in IE.
The other issue is performance. This was analyzed best by another blog author in High Performance Web Sites. When you load CSS files with the link command in the header of the HTML page the CSS files load in parallel with the order preserved. When you load CSS files with an @import either in the header section, or in a separate CSS file, CSS files are loaded sequentially, and you take a performance hit. Admittedly, this is not a big hit, but it does slow your load time.
The answer to this question now becomes obvious, use the "link" command in the HTML header section. You can specify your media type easier, you're sure the CSS file is being loaded, you're sure of the order that the CSS files load, and you load the CSS files in parallel, so your page will load faster.