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?
6 Answers
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>
-
4Or you can use
document.head
instead ofdocument.getElementsByTagName("head")[0]
. Commented Apr 8, 2015 at 14:42 -
1In what circumstances you can get
file
to be undefined here? You just created it.– vittoreCommented Jun 21, 2016 at 13:09 -
@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– wellCommented Jul 29, 2016 at 11:12
what about:
$('head').append('<link rel="stylesheet" type="text/css" href="{yoururl}">');
-
-
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. Commented Jul 19, 2018 at 6:43
-
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 Commented Jul 19, 2018 at 7:36
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.
-
-
1I 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. Commented Oct 6, 2020 at 16:45 -
@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.– BachsauCommented Oct 6, 2020 at 16:59
-
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 Commented Nov 27, 2020 at 2:49
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.
-
@StartupCrazy as far as I know it is still valid code. Something I would use in a pinch, if necessary.– robabbyCommented Aug 6, 2012 at 18:17
-
1Thats what I was told when I researched about it, stackoverflow.com/questions/9884182/…– user379888Commented Aug 6, 2012 at 18:20
-
1This 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.– AndrewCommented Feb 3, 2017 at 14:23
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 /css
in rel.
<link href="/main.css" rel="stylesheet/css" type="text/css" />
Just tested this myself, thought about posting this to underline this pitfall.
-
2
-
@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– McAuleyCommented Jan 1, 2021 at 19:46
You can place <head></head>
tags in your body section.
-
+1 Good one. Is it any better than placing the links directly inside the body?– user379888Commented Aug 6, 2012 at 19:08
-
I just did it. It works for me but there are a little issues.– user379888Commented Aug 6, 2012 at 19:17
-
Here is my real widget:widgetsinabottle.com/saad_widget/effect.html Here is the one I created using your advice: widgetsinabottle.com/home– user379888Commented Aug 6, 2012 at 19:18
-
3
-
1Upvoted because made me laugh so hard :D God, you're insane Commented Nov 16, 2016 at 20:11
.innerHTML += "<link ="#">";
should work for just javascript.