How to add a CSS stylesheet outside of the header?
February 9, 2012 8:54 AM Subscribe
How do you add several additional CSS styles to a web page, when you don't have access to the header or the linked styles sheets? Yes, you can repeatedly declare an inline style for each piece of text, but that defeats the purpose of style sheets. A fuller picture of what is desire, along with backstory is below the fold.
There's a content management system that I have to work with. It writes out A) the header, B) leaves room for the user to add HTML or inline CSS, then writes out C) a sidebar and footer.
In that B space, I need to make a list of information that covers every week of a year. CSS would be the best way to do this, but I don't have access to the header or the original style sheets and I'm not going to get them (seriously, not gonna happen). Inline styles could do the job, but being able to link or embed new CSS styles would be the best way, if possible.
Is there a way to add a link to or embed another CSS style sheet outside of the header of a webpage?
There's a content management system that I have to work with. It writes out A) the header, B) leaves room for the user to add HTML or inline CSS, then writes out C) a sidebar and footer.
In that B space, I need to make a list of information that covers every week of a year. CSS would be the best way to do this, but I don't have access to the header or the original style sheets and I'm not going to get them (seriously, not gonna happen). Inline styles could do the job, but being able to link or embed new CSS styles would be the best way, if possible.
Is there a way to add a link to or embed another CSS style sheet outside of the header of a webpage?
Can you execute javascript code? Here's a quick-and-dirty way to insert a CSS tag:
posted by mkultra at 9:30 AM on February 9, 2012 [1 favorite]
var a=document.createElement("link");(not tested, but should work)
var b=document.getElementsByTagName('link')[0];
a.href='{YOUR_CSS_URL}';
a.type='text/css';
a.rel='stylesheet';
b.parentNode.insertBefore(a,b);
posted by mkultra at 9:30 AM on February 9, 2012 [1 favorite]
Best answer: <style>@import url(/styles/mystylesheet.css);</style>
posted by Citrus at 9:30 AM on February 9, 2012 [1 favorite]
posted by Citrus at 9:30 AM on February 9, 2012 [1 favorite]
You can add style whenever you want. The big issue is that the browser may render things with the style as it is before the new one changes it. It's why you see stuff move itself around or change appearance mid-load on some poorly designed pages.
Inline is kinda stinky but it has the great advantage of not showing that sort of behavior. You may want to split the difference and do an inline define block at the top of your B space simply using the STYLE tags. You can use classes and ids there so you're not re-doing things over and over but not add the additional http connection that an additional file adds.
posted by phearlez at 9:42 AM on February 9, 2012
Inline is kinda stinky but it has the great advantage of not showing that sort of behavior. You may want to split the difference and do an inline define block at the top of your B space simply using the STYLE tags. You can use classes and ids there so you're not re-doing things over and over but not add the additional http connection that an additional file adds.
posted by phearlez at 9:42 AM on February 9, 2012
Response by poster: @import url(/styles/mystylesheet.css);
This is working like a champ, thanks!
posted by Brandon Blatcher at 11:02 AM on February 9, 2012
This is working like a champ, thanks!
posted by Brandon Blatcher at 11:02 AM on February 9, 2012
Best answer: Two things:
1. not all browsers support @import well. A quick search will get you a compliance list.
2. you'll find that some browsers require the URL to be quoted: @import url("/foo.css");
posted by introp at 12:12 PM on February 9, 2012
1. not all browsers support @import well. A quick search will get you a compliance list.
2. you'll find that some browsers require the URL to be quoted: @import url("/foo.css");
posted by introp at 12:12 PM on February 9, 2012
This thread is closed to new comments.
posted by losvedir at 9:08 AM on February 9, 2012 [1 favorite]