Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it better to use the link tag or the style tag to import CSS?

Tags:

Or is it just a personal preference thing? What I'm getting at is, is there a specific benefit to using either method?

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

versus

<style type="text/css"> @import url('main.css'); </style> 
like image 287
Iain Fraser Avatar asked Sep 30 '09 02:09

Iain Fraser


People also ask

Should I use link or import?

Linking is the first method for including an external style sheet on your web pages. It is intended to link your page with your style sheet. It is added to the head of your HTML document. Importing allows you to import one style sheet into another.

Should you use @import CSS?

Avoid using CSS @import and use other methods like link tags, inlining CSS, or combining CSS to allow the browser to load your page faster, and also vastly improve your visitors' page experience.

Where should you import a CSS file?

External CSS Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.


1 Answers

According to Yahoo's Best Practices for Speeding Up Your Web Site, always use <link> instead of @import. More detailed information is available in this blog post.

In IE (tested on 6, 7, and 8), @import causes the stylesheets to be downloaded sequentially. Downloading resources in parallel is key to a faster page. This behavior in IE causes the page to take a longer time to finish.

Using <link> allows the browser to open additional connections, thereby decreasing load times.

like image 148
William Brendel Avatar answered Sep 25 '22 07:09

William Brendel