Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 491
liewl Avatar asked Nov 26 '08 17:11

liewl


People also ask

What are the different ways of linking a CSS file to an HTML webpage?

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.

What is the difference between HTML and CSS?

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.

What is the difference between link and @import in CSS?

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.

What are the 3 different ways CSS can be applied to an HTML page?

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.


1 Answers

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.

like image 97
BlaM Avatar answered Sep 18 '22 05:09

BlaM