Is it possible to reference external stylesheets in the html body?

Question

I want to external CSS files side by side of html code in the body.

Why?

I am developing some templates that get included inside a page, but from those templates I cannot modify the head or add JS/CSS references to the html head section.

What I currently have is:

<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit --> 
    <style>
    #mywidget {
     color: red;
    }
    </style>
    <div id="mywidget">
    hello
    </div>

<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>

I would like turn that into something like:

<html>
<head>
<!-- this i cannot edit -->
</head>
<body>
<!-- some html code -->
<!-- now comes what i can edit --> 

    <!-- LINK TO AN EXTERNAL CSS FILE -->

    <div id="mywidget">
    hello
    </div>

<!-- end of section i can edit -->
<!-- other html code -->
</body>
</html>

But I dont want the overhead of loading all the css every time the page loads, so i want to put it into an external file.

I thought of loading the external css (it will be hosted within the same domain) using javascript, then create a element and insert the content somehow...

I think this should work, however if not I think I can hack some style parser together using jquery which applies the styles at least for basic definitions.

But I am sure there must be a better way!

Any hint is appriciated!

@hazzik this is what I am doing right now, however i wuold like to get rid of the overhead of loading it each time — The Surrican, Aug 04 '12 at 16:35
@bergi i just dont have access to the head section. the code must be contained within one file that gets included and from there i cannot reference the head and somehow modify it. only using javascript or something like that. — The Surrican, Aug 04 '12 at 16:36
Uh, a faulty template system not supporting this; I've missed that. — Bergi, Aug 04 '12 at 16:38
@Bergi there is already an elegant solution in the answers seciton, however what template system would you recommend? maby i can give a suggestion to change this in the future? — The Surrican, Aug 04 '12 at 16:40
@hazzik, AFAIK you can use `` only in the ``, I could be wrong though — Adi, Aug 04 '12 at 16:41
May be a duplicate of [this](http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body) — Jashwant, Aug 04 '12 at 17:06

score 4 · Answer 1 · answered Aug 04 '12 at 16:34

4

You can use CSS's @import rule

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

answered Aug 04 '12 at 16:34

Adi

5,089
6
33
47

1

@JoeHopfgartner, happens to everybody. Sometimes stuff just skip your head. – Adi Aug 04 '12 at 16:37
2

Even `style` is incorrect in `body` tag :) [Refer](http://stackoverflow.com/questions/1642212/whats-the-difference-if-i-put-css-file-inside-head-or-body) – Jashwant Aug 04 '12 at 17:05
1

@Jashwant I don't think this is correct. At least not for HTML5. Since scoped styles are supposed to be W3C-approved. Do you have a link or a quote from W3 specs that states otherwise? – Maksim Vi. Apr 04 '14 at 00:28
Yes, it's valid in HTML5. It's clear in the link I mentioned. Thanks for pointing it out here. – Jashwant Apr 04 '14 at 07:09

Pevara · Answer 2 · 2014-12-22T10:44:48.953

putting style tags inside the body is indeed invalid according to html standrds (though it might work in some browsers)

you can put script in the body though, and you can make the script insert the style link in your head. jquery pseudocode would look like this

<body>
  ...
  <script type="text/javascript">
    $(document).ready(function() {
      $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
    });
  </script>
  ...
</body>

score 1 · Answer 3 · answered Aug 04 '12 at 16:53

1

<link rel="stylesheet" type="text/css" href="style.css">-- you can put this in the <body> tag, too; it works just fine in chrome.

answered Aug 04 '12 at 16:53

Zaq

1,348
1
11
19

1

It might work, but it's invalid to have a `link` tag with a `rel` attribute in the body of the HTML. (HTML5) – René Aug 08 '14 at 12:32

Is it possible to reference external stylesheets in the html body?

3 Answers3