CODEWITHSUNDEEP
htmlcss
Glenn
Glenn

Reputation: 5051

Alternative ways to link a css file?

I'm working with software that uses a web interface, but this software apparently doesn't support linking css files in the usual way:

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

The software renders the pages directly, it doesn't go through a "real" web server. Are there alternative ways to link a css file that I might try?

Upvotes: 0

Views: 924

Answers (4)

Stephen P
Stephen P

Reputation: 14800

I do this all the time when working on a page locally, no "real" web server is needed, and it works just fine. You do have to be careful about absolute vs. relative paths, for example href="site.css" vs. href="/styles/site.css" the first works fine with a file:/// url but the second refers to the root of the local filesystem, which is probably not where the css file actually is.

Can you post an actual tiny HTML page and CSS file that doesn't work for you?

Upvotes: 0

Weston C
Weston C

Reputation: 3632

Well, if JavaScript isn't sanitized out and you're up for a bit of a hack:

<script type="text/javascript">
(function () {
    var h, l, addcss;
    if(h = document.getElementsByTagName('head')[0]) {
        addcss = function (url) {
            l = document.createElement('link');
            l.setAttribute('type','text/css');
            l.setAttribute('rel','stylesheet');
            l.setAttribute('href',url);
            return h.appendChild(l);
        };
        addcss(cssfile1);
        addcss(cssfile2);
                    ...
        addcss(cssfileN);
    }
})();
</script>

Or you could directly manipulate the document.styleSheets object...

Upvotes: 2

Dfowj
Dfowj

Reputation: 739

Try this:

<style type="text/css">
  @import "relativePathToYourCSSFile.css";
</style>

Edit: you can also make all of your css declaration in that style tag, which wont require the page to 'go looking for' the other files (which it would need a server to do i believe). For example:

<style type="text/css">
    #someCssId {
        someStyleProp:someValue;
    }
</style>

Upvotes: 5

James Westgate
James Westgate

Reputation: 11444

if you have an existing css file, you can place an @import at the bottom of the file.

You could inline styles into html using the <style> tag and then place the css or an @import inline.

Upvotes: 1

Related Questions