Question

If CSS Stylesheets are defined inline with <style>, then why are they referenced with <link>?

JavaScript uses the <script> tag to define inline scripts and references them with <script src="">, so why not use <style src=""> for CSS? Is there a special function that the <link> tag can preform that using <style> can’t?

Answer 1

The root of this asymmetry between style and source comes from the differences in how HTML handles scripts and resources. Javascript is (surprise!) a script, while stylesheets are considered a resource.

As we know, scripts can be both written inline or sourced out from other pages, both with that same element: script. This is how the specs tells us it should work.

But also per the spec, the style element defines styling to your page, and that’s all it can do. It can’t reference styling from any other documents like the script tag can. Why? I can’t say more.

A link element, on the other hand, links resources to your page, which can be stylesheets and other things, too. So when you’re outsourcing style, you don’t use <style> but instead you <link> it.

It’s true that one could imagine being able to write something like <style src=''> where you set the source of your styling, but, alas, that attribute doesn’t exist. So we can’t!

Now I understand that saying “Because the specs say so” might be the most satisfying answer. But it’s the best I can do for ya right now.

Source: the specs for styles and links.