current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 32 down vote favorite
9

My one of relative who started to learn Web Development asked me this question.

Why <script src="min.js"></script> but <link rel="stylesheet" href="min.css"> why not <style href="min.css"></style> why we use link tag to add external css in the page but when we link css to page but we use <style>...</style> when we write css inside <head>?

I told him that it's because of Specification. Is there any more info to give to him?

share|improve this question
1  
You can also do this: <style type="text/css">@import url("style.css");</style>. –  Rocket Hazmat Aug 19 '11 at 14:00
1  
@Rocket but it's not advisable by Yslow team developer.yahoo.com/performance/rules.html#csslink –  Jitendra Vyas Aug 19 '11 at 14:03
    
they mentioned In IE @import behaves the same as using <link> at the bottom of the page, so it's best not to use it. –  Jitendra Vyas Aug 19 '11 at 14:06
3  
I just thought I'd point out another way to do that, just to make things more interesting. –  Rocket Hazmat Aug 19 '11 at 14:08
2  
IE, it's best not to use it. FIFY –  Rocket Hazmat Aug 19 '11 at 14:56
show 1 more comment

5 Answers

up vote 19 down vote accepted

It's historical... coincidence? You can recommend him reading part about Past of diveintohtml5.info, where there are some interesting stories, actually mail correspondences, between web developers. Web developers means they were, in fact, developing the Web we see nowadays ;)

I.e. <img> tag we are used to:

<IMG SRC="file://foobar.com/foo/bar/blargh.xbm">

could be:

<ICON name="NoEntry" href="http://note/foo/bar/NoEntry.xbm">

or

<A HREF="..." INCLUDE>See photo</A>

or

<INCLUDE HREF="...">

but finally devs decided to stick with <img>, which was already implemented:

We’re not prepared to support INCLUDE/EMBED at this point. … So we’re probably going to go with (not ICON, since not all inlined images can be meaningfully called icons). For the time being, inlined images won’t be explicitly content-type’d; down the road, we plan to support that (along with the general adaptation of MIME). Actually, the image reading routines we’re currently using figure out the image format on the fly, so the filename extension won’t even be significant.

I don't know direct answer to your question, but I'm pretty curious about <link> tag, too. Finding answer would probably include some web archives digging.

share|improve this answer
    
+1 for Good Information –  Jitendra Vyas Aug 19 '11 at 14:11
1  
I was about to write a similar answer - it is probably just an implementation thing. One browser implemented it in one way the other did something else and eventualy one got into the specification. But I would really love to hear from someone who got his part writing the specifications back in the days. –  easwee Aug 19 '11 at 14:24
    
Whatever was decided in past it's ok but W3C can change in future for example in HTML 5 text/css and text/javascript are not required. –  Jitendra Vyas Aug 19 '11 at 14:42
add comment
up vote 1 down vote

The <link> tag is used to "link" other documents to the current one, and describe it's relationship, or rel, with it.

You can also use <link> to link other things to the document. For example, favicons:

<link rel="shortcut icon" href="favicon.ico" />
share|improve this answer
    
Agree: link can be used to link to many things (one for each rel type), so the really surprising point about the interface is why not use link for scripts as asked here. –  Ciro Santilli Dec 31 '13 at 17:11
add comment
up vote 1 down vote

This might explain things, I guess: http://www.w3.org/TR/html4/struct/links.html

share|improve this answer
add comment
up vote 9 down vote

There is a difference, at least from the W3C's point of view.

A <style> element introduces a block of CSS rules that apply to the current document. However, external style sheets are actually considered as whole documents related to the current page, and user agents are free to ignore such documents, depending on the type and media attributes of the link. For instance:

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />

In this situation, user agents would typically only follow one of the links, either the screen one (for normal rendering) or the print one (for, well, printing). The idea was to preserve bandwidth by only downloading the appropriate resource, instead of fetching everything and filtering on the media type later.

This is mentioned in the specification:

When the LINK element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.

share|improve this answer
    
But We can also define media inside a external css file. Which is preferred these days to save http requests –  Jitendra Vyas Aug 19 '11 at 14:39
    
@Jitendra, indeed we can, but then we'd have to download the CSS file in order to check its media type. Putting that information in the <link> element allows the user agent to completely disregard the resource, without having to load it first before it can decide to do so. –  Frédéric Hamidi Aug 19 '11 at 14:47
    
What about CSS 3 media queries which is for same medium but for different screen sizes. Do you prfere to use seperate css file for each media like, print, screen etc? –  Jitendra Vyas Aug 19 '11 at 14:50
    
Well, CSS3 is still (relatively) new. For now, I indeed prefer using a different CSS file for each media type, with common styles imported using @import directives. (That said, I don't use multiple media types very often.) –  Frédéric Hamidi Aug 19 '11 at 14:57
1  
@hamidi implementors don't always follow the spec. –  Knu Aug 19 '11 at 17:17
add comment
up vote 3 down vote

They both have a basically identical meaning, and you have spotted a sort of inconsistency in HTML. The cause of this is that the standards were based on the implementations of different browsers. Different browsers came up with the attributes in the different tags, and the W3C just decided to keep some of the inconsistencies in order to maintain backwards compatability.

Elements that use src: script img iframe input video frame

Elements that use href: a link base

share|improve this answer
3  
There is no inconsistency in HTML. src is used for replaced elements. Those elements are a part of the HTML document. While, href is used for linking to other documents. Here, we specify a 'relationship' of the external document to the current document. –  apnerve Feb 22 '12 at 16:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.