Best way to link stylesheet

i have been slowly teaching myself how to create websites and i have a question about linking to stylesheets in the html head section. is it better to use the link element or style element? what are the pros/cons of each? does it really matter?

If the server declares the encoding (using the charset attribute of the Content-Type header) the <meta> element is ignored.

A <meta> HTTP equivalent is only used if the corresponding real HTTP header is missing. Declaring the character encoding doesn’t mean the browser starts over and re-interprets everything (which is also why you can’t specify the content type in a header equivalent), so anything outside the browser’s default assumption (usually ISO 8859-1 or Windows-1252) needs to come after such a line.

and what if it needed to know if the Linked CSS file(s) were UTF-8

Only way my browsers know my stylesheets are utf-8 is because I save them that way and the server serves them that way. Otherwise, it would not know. The user might have set the browser to some charset though.

That’s different. If the encoding declaration is to be useful at all, it must precede all other content – at least all other content that is outside the US-ASCII range.

Which it only can as an HTTP Header anyway. By the time the ua gets to the <meta> tag, it’s already either been told by the server, or it’s made a guess so that it CAN read the meta tag.

But the order of all other <meta>, <style>, <link>, <script> etc. elements is arbitrary.

Would be, if some browsers didn’t puke on the order of <links> calling css vs <links> calling Javascript coughfirefoxcoughcough.

That’s different. If the encoding declaration is to be useful at all, it must precede all other content – at least all other content that is outside the US-ASCII range.

But the order of all other <meta>, <style>, <link>, <script> etc. elements is arbitrary.

Yes, but the browser is stupid (I didn’t mention any servers) and what if it needed to know if the Linked CSS file(s) were UTF-8, or something strange. Surely you don’t write 100 lines of STYLE first just for them to end-up having a fight afterwards…

Yes, according to the Recommendations. But we both know I was referring to best practice like if using ‘META http-equiv’ and ‘charset’ it goes prior to the TITLE, etc.

I use <link for my site wide style sheets and then @import for style sheets specific to individual pages e.g. forms. This way the extra css is only loaded when the page is loaded.

Not at all, just surprised by what you wrote, and wondered if I’d misread it or you’d mistyped it!

Do what? Use <style>@import</style> instead of <link>? Just a matter of taste, plus, as Stephen said, it’s a simple way to prevent Netscape 4 from seeing CSS that it probably won’t be able to handle (and which even crash it). You can even use it to block style sheets from IE7 and older, by specifying media types after the directive:

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

I’m not saying you should use both ways to link to the same style sheet, of course!

You calling me a liar? :slight_smile:

Why?
There’s nothing ‘technical’ that says so. The sub-elements in <head> can come in any order.

The @import looks like it means you don’t have to go fishing for the html page to change the style there.

One reason why people used @import in a style tag instead of using a link tag was to hide the styles from Netscape 4 without needing to use the /// css hidden from NS4 /* */ hack.

Another consideration is that there is only supposed to be one link tag per media. Browsers do actually accept more than one though so it isn’t a problem unless you actually set up alternate stylesheets. With alternate stylesheets defined using link tags you can only have one of them active at a time as the view/style menu will automatically disable all but the one you select in the browser.

Is that true? I had always been led to believe that an embedded stylesheet had a higher specificity than a linked stylesheet.

Albeit technically the LINK should go before the STYLE (if used) anyway. So generally speaking I suppose it is less of an issue in the first place.

Only if the <style> tag appears after the <link> tag (assuming selectors have the same specificity).

On the other hand, something in a style attribute will override declarations in an internal or external style sheet (unless they are declared as !important).

So would I (usually for forms). But, of course, you can use this equivalent for linking to an external style sheet,

<link rel="stylesheet" type="text/css" href="/style.css" media="screen,projection">
<!--Equivalent to-->
<style type="text/css" media="screen,projection">
  @import url("/style.css");
</style>

Tommy, why would I do this? Not criticizing you, honestly asking. Seems redundant…so tell me why it’s not. :slight_smile:

I’ll second what Felgall has said - several of the big reasons to use CSS are around the fact you have one single sheet that all other pages link to.

One point to consider is that anything you have in a <style>…</style> element overrides anything in a <link rel=“stylesheet”> link in the case of a conflict. I would only ever use <style> for one-off ad hoc features that are only going to apply to a single page.

Use the link tag as then your one stylesheet can apply to all your pages at once.

If you use the style tag you lose most of the benefit of using styles because any changes to your page appearance will need to be separately applied to each page. Once you have thousands of pages that can take months to do what you can do with the link tag in seconds.

I did that once, with a site made up of about 150 pages. I was very, very ignorant, and I paid the price. Never again.

Link is used to link up your external style sheet with your HTML. and the biggest advantage of using external style sheet is that you can control the look of all the pages with a single CSS. And if you want to apply some thing just on a single page then you should go for the internal style sheet and use style for it.