Ossoba Design Studio

Website Design => Web design and coding tips => Topic started by: yuri on December 12, 2007, 11:47:43 AM

Title: When to use CSS @import and when the link tag
Post by: yuri on December 12, 2007, 11:47:43 AM
I found out about the CSS @import declaration when I saw it used to import the main stylesheet of the page:
Code: [Select]
<style type="text/css">
@import url("main.css");
</style>

This raised the question of when should you use the link tag:
Code: [Select]
<link rel="stylesheet" type="text/css" href="..." media="screen" />and when the @import technique.

After a quick search in Google (plenty of info on the subject (http://www.google.com/search?as_q=css+import+vs+link&hl=en&num=50)) I found out that using @import from the HTML directly was used in the days of yore to apply different styles for different browsers. Now a days this use is kind of irrelevant.

@import's original purpose is to modularize CSS styles (a good article on the subject (http://dhtmldev.com/content/view/63/27/)) and it is better to use it like that and not to import the main style sheet. For the main / master stylesheet of the page one should use the link tag.