What's the difference between these two methods of linking a html page to a css file?

Question

I've been reading through a few tutorials about css, and I saw two different ways to state which css file should be used to style the page:

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

and

<link rel="stylesheet" type="text/css" href="style.css" />

What's the difference between them? Which one should I use?

Answer 1

the first one is, in fact, an embedded CSS that refers to another file; while the second one is a direct refer from HTML to CSS.

i can't think of a reason to use the first one.

Answer 2

the @import rule is mainly a hack. All modern browsers understand the @import rule whereas early browsers don't. So, if your site crashes on early browsers due to a css rule (not a common thing to happen but yet...) you can have a simple css for the older versions (in a link element) that they will understand and parse and place it above the @import rule

EDIT: Since the @import rule creates a few issues with caching (as mentioned already from others) you could @import(styles.php) and in the styles.php do something like

ob_start ("ob_gzhandler");
header("Content-type: text/css");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s",time() + $offset) . " GMT";
header($ExpStr);    
echo ("@import url(style1.css);\r");
echo ("@import url(style2.css);\r");
echo ("@import url(style3.css);\r");

Answer 3

As said the first is an imbedded style sheet (which can be also be done in external stylesheets) This can lead to better organised stylesheets when used externally but bear in mind the when a stylesheet is imbedded the browser will not cache it

Answer 4

Historically, I believe the first was often used to prevent Netscape 4 from picking up on your styles (I could be wrong, though; when Netscape 4 was still an issue, I wasn't very aware of cross-browser coding so this is a very fuzzy memory).

These days, people will sometimes use <link> to include a single stylesheet from the webpage, and then @import to grab a bunch of others from that single sheet. This allows you to separate your styles out into layout.css, typography.css, etc. if that's the way you like to roll.

As Tungle mentioned, caching becomes an issue with @import, but only for IE.

Answer 5

There isn't much difference unless you are using very old browsers (netscape 4.x and ie 3.x). You can read a complete lowdown on what each means here.

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).

Answer 6

According to Yahoo's "Best Practices for Speeding Up Your Web Site" using @include behaves like putting the <link> at the bottom of the page in Internet Explorer.

Having the CSS load at the end of the page causes the page to be rerendered. That means, that the page is first shown without CSS and then redrawn with CSS. That slows the loading of the page a bit down.

Answer 7

It's about precedence. if you @import foo.css, the CSS rules behave as if you had put the contents of foo.css directly into that <style> block. This means that they have a higher priority than a css file that is <link>ed in.

So if you were to @import a file that set font-size: 12pt AND link a file that set font-size: 14pt you would end up with 12pt text.

Answer 8

The CSS Cascade and why you should care

It comes down to CSS Specificity and CSS Cascading. Tread carefully and know what you're doing and CSS Specificity can be your friend.

// bring CSS into the Page
<style type="text/css">@import url("importedStyles.css");</style>

/// Link to CSS Style Sheet
<link rel="stylesheet" type="text/css" href="linkedStyles.css" />

Since @import brings the style into that page, those rules will override External or "linked" stylesheets. In-Line CSS trumps either because of a higher CSS specificity:

<span style="color: red;">I am DEFINITELY RED</span>

However, this only works when the rules are the same specificity

Take the following:

<div class="error">I am an error message</div>

If I have a rule in the importedStyles.css of so:

.error { color: blue; } /* specificity = 10 */

And a rule in "externalStyles.css" like so:

div.error { color: red; } /* specificity = 11 */

It will take the externalStyles version

Note: CSS specificity of inline style is 1000, so it trumps all things, except the !important tag which is 10000. Another CSS Specificity Article

CSS Specificity Reference

• !important = 10,000
• inline style = 1000

• each #id in the rule = 100 -eg, this is 200:

  #content #footer { color: red; } /* 200 */

• each class = 10

• each html element = 1

So, some examples:

body .selected { color: red; } /* 11 */
ul li { color: red; } /* 2 */
ul li.selected { color: blue; } /* 12 */

#content ul li.selected a { color: red; } /* 113 */

/* Careful, can't override this, ever */ 
a { color: blue; !important } /* 10,000 - Override everything */

So... the Cascade applies to element of the same Specificity only. Cascades are applied AFTER specificity rules are applied.