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?
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
HTML is a markup language used to create static web pages and web applications. CSS is a style sheet language responsible for the presentation of documents written in a markup language.
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.
There are three ways to add CSS to HTML. You can add inline CSS in a style attribute to style a single HTML element on the page. You can embed an internal stylesheet by adding CSS to the head section of your HTML doc. Or you can link to an external stylesheet that will contain all your CSS separate from your HTML.
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.
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