CSS-hack - Adding css in the body of a website

Question

I am stuck in a situation where I only have access to the body of the website and not the head. I have to use a new stylesheet. Now the solution that I came across to add the CSS file in the body of the website. Of course, it is a hack so I was wondering if there is a better solution to it?

you could add with javascript your stylesheet to the head during runtime. — Sven Bieder
– Sven Bieder, Commented Aug 6, 2012 at 17:51
@SvenBieder: I am little new with javascript so I want to stick the solution in html/css only. Still, thanks for the solution. — user379888
– user379888, Commented Aug 6, 2012 at 17:58
@voodoo417: That would work, provided that the head includes jQuery. — user379888
– user379888, Commented Aug 6, 2012 at 18:04
.innerHTML += "<link ="#">"; should work for just javascript. — Kwon
– Kwon, Commented Aug 6, 2012 at 18:22

well · Accepted Answer · 2021-02-10 14:51:16Z

43

We have different ways to load a CSS File.

1 - HTML - The conventional way to load external CSS files on a page is:

<head>
   <link rel="stylesheet" type="text/css" href="file.css" />
</head>

2 - CSS - Using the tag import from your CSS file

@import  url("another_file.css");

3 - JavaScript - Using only JavaScript to do it, you should create a Javascript function:

<script type="text/javascript">

   function loadCSS(filename){ 
      var file = document.createElement("link");
      file.setAttribute("rel", "stylesheet");
      file.setAttribute("type", "text/css");
      file.setAttribute("href", filename);
      document.head.appendChild(file);
   }

   //just call a function to load your CSS
   //this path should be relative your HTML location
   loadCSS("path_to_css/file.css");
</script>

4 - JavaScript - Either you can add dynamic definitions such as:

<script type="text/javascript">

   var sheet = (function() {
      var style = document.createElement("style");
      style.appendChild(document.createTextNode(""));
      document.head.appendChild(style);
      return style.sheet;
   })();

   sheet.insertRule("span { visibility: hidden }", 1);
</script>

edited Feb 10, 2021 at 14:51

answered Aug 6, 2012 at 18:21

well

1,14011 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timothy Gu Over a year ago

Or you can use document.head instead of document.getElementsByTagName("head")[0].

vittore Over a year ago

In what circumstances you can get file to be undefined here? You just created it.

well Over a year ago

@vittore you are right, the code described at HTML5Rocks show that is not necessary html5rocks.com/en/tutorials/speed/script-loading Futhermore, I found at Mozilla reference from createElement that it won't return undefined developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement

Simon Dragsbæk · Accepted Answer · 2014-07-17 06:37:29Z

11

what about:

$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');

edited Jul 17, 2014 at 6:37

answered Jul 3, 2013 at 16:42

Simon Dragsbæk

2,4073 gold badges31 silver badges54 bronze badges

3 Comments

Marcel Over a year ago

He needs it in the head. Is $("head").append() a thing?

DeveloperChris Over a year ago

This jquery hack wont work unless it is called from within the head. the css file wont be parsed otherwise. At least thats my experience.

Simon Dragsbæk Over a year ago

Javascript is best practice to run after all your other html? shouldn't matter, i do lacy load of css so i only show critical before - same solution to different problems

Santiago Rebella · Accepted Answer · 2012-08-06 18:24:19Z

10

Do you mean define CSS again and override previous CSS like?:

<html>
    <head>
        <style type='text/css'>
            * {color:red;}
            p {background-color:yellow;}
        </style>
    </head>
    <body>
        <style type='text/css'>
            * {color:green;}
            p {background-color:black;}
        </style>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> 
    </body>   
</html>

You could copy the entire style sheet there or of course then include it with php or javascript.But like this, looking at the head CSS stylesheet and overriding all the styles appearing there in the body should work. Not sure if this is clean though.

answered Aug 6, 2012 at 18:24

Santiago Rebella

2,4492 gold badges23 silver badges29 bronze badges

4 Comments

Bachsau Over a year ago

This is not valid HTML.

David Parks Over a year ago

I checked this HTML in validator.w3.org. It states

Error: Element style not allowed as child of element body in this context. (Suppressing further errors from this subtree.)

I think @Bachsau's comment is correct, though based on other answers it sounds like many (maybe most? maybe all?) browser support this non-standard form. But it's not clear if it would break some browsers now or perhaps in the future.

Bachsau Over a year ago

@DavidParks Browsers support a lot of non standards things and always did. But people should follow the standards or otherwise, we will end up with the same situation we already were in some years ago, where a website looks different in every browser and creators start to optimize for a single browser, locking everyone else out.

Santiago Rebella Over a year ago

well, its not a great solution but is an option you have as the title clear states CSS hack and even not valid, will work where valid standard html wont, for example appending the style to the head with javascript if the user-agent has disabled js (I dont know the context where this hack was needed). I tend to think not everyone is an erudite and only codes the best code ever, sometimes you need a solution that works, that solves a problem a quick hack and go on, like 'this', the context is everything and people should not have any should more than their own real should

Community · Accepted Answer · 2017-05-23 12:02:06Z

7

You could use the @import url("your_styles.css"); method.

If you have access to the stylesheets being called in the head of the document, you can add this at the top of the CSS doc.

You could try adding an alternate <head> to your doc as well, which I do not advise, but if you have to then you can also do this:

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

If backwards compatibility is not a concern for you, there is also the HTML5 scoped attribute which has been addressed in this question: Does <STYLE> have to be in the <HEAD> of an HTML document?

Hope this helps!

EDIT:

Found two links in regards to @import feature. One is a working draft from Mozilla Developers center which was last updated on Jul 31, 2012:

https://developer.mozilla.org/en-US/docs/CSS/@import

Also a Sitepoint Reference article with browser support stats:

http://reference.sitepoint.com/css/at-import

I would imagine this is still a functional, usable feature when necessary.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Aug 6, 2012 at 18:13

robabby

2,2106 gold badges34 silver badges47 bronze badges

3 Comments

robabby Over a year ago

@StartupCrazy as far as I know it is still valid code. Something I would use in a pinch, if necessary.

user379888 Over a year ago

Thats what I was told when I researched about it, stackoverflow.com/questions/9884182/…

Andrew Over a year ago

This is the correct answer... the <style> tags with import. Perfect. Don;t know what you are talking about "alternate head", you can add this to the body of your document.

BananaAcid · Accepted Answer · 2014-12-29 08:44:46Z

3

Apperently, it seems to work for me, if it looks like

<link href="/main.css"  rel="stylesheet" type="text/css"  />

but not, if it contains the /cssin rel.

<link href="/main.css"  rel="stylesheet/css" type="text/css"  />

Just tested this myself, thought about posting this to underline this pitfall.

answered Dec 29, 2014 at 8:44

BananaAcid

3,5601 gold badge39 silver badges41 bronze badges

2 Comments

AnnanFay Over a year ago

Stylesheet links are body-ok which means they are allowed in the <body> section of a page. Is stylesheet/css even a valid value for rel? From what I can tell you can have multiple values but they must be space separated.

McAuley Over a year ago

@BananaAcid, your rel="stylesheet/css" is invalid, which is why it doesn't work. See valid values at w3.org/TR/html52/links.html#linkTypes

Kwon · Accepted Answer · 2012-08-06 18:05:13Z

2

You can place <head></head> tags in your body section.

answered Aug 6, 2012 at 18:05

Kwon

3903 silver badges12 bronze badges

7 Comments

user379888 Over a year ago

+1 Good one. Is it any better than placing the links directly inside the body?

user379888 Over a year ago

I just did it. It works for me but there are a little issues.

user379888 Over a year ago

Here is my real widget:widgetsinabottle.com/saad_widget/effect.html Here is the one I created using your advice: widgetsinabottle.com/home

Albert Wiersch Over a year ago

"head" elements do not belong in "body" elements.

Rápli András Over a year ago

Upvoted because made me laugh so hard :D God, you're insane

|

Collectives™ on Stack Overflow

CSS-hack - Adding css in the body of a website

6 Answers 6

3 Comments

3 Comments

4 Comments

3 Comments

2 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

4 Comments

3 Comments

2 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related