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>
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.
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.
External CSS Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With