CODEWITHSUNDEEP
css
user379888
user379888

Reputation:

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

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?

Upvotes: 33

Views: 83433

Answers (6)

well
well

Reputation: 1140

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>

Upvotes: 43

robabby
robabby

Reputation: 2200

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.

Upvotes: 7

BananaAcid
BananaAcid

Reputation: 3481

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.

Upvotes: 3

Simon Dragsb&#230;k
Simon Dragsb&#230;k

Reputation: 2399

what about:

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

Upvotes: 11

Santiago Rebella
Santiago Rebella

Reputation: 2449

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.

Upvotes: 10

Kwon
Kwon

Reputation: 390

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

Upvotes: 2

Related Questions