Join 3,375 readers in helping fund MetaFilter (Hide)


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?
posted by Brandon Blatcher to Computers & Internet (6 answers total) 2 users marked this as a favorite
 
I've included 'style' tags with CSS rules in the body before and it has worked for my use cases. The tags are supposed to go in the head, so I'm not sure how well it's supported / when it will work, but you could at least try it and see.
posted by losvedir at 9:08 AM on February 9, 2012 [1 favorite]


Can you execute javascript code? Here's a quick-and-dirty way to insert a CSS tag:
var a=document.createElement("link");
var b=document.getElementsByTagName('link')[0];
a.href='{YOUR_CSS_URL}';
a.type='text/css';
a.rel='stylesheet';
b.parentNode.insertBefore(a,b);
(not tested, but should work)
posted by mkultra at 9:30 AM on February 9, 2012 [1 favorite]


<style>@import url(/styles/mystylesheet.css);</style>
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


@import url(/styles/mystylesheet.css);

This is working like a champ, thanks!
posted by Brandon Blatcher at 11:02 AM on February 9, 2012


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


« Older What should I expect at my fir...   |  Weird science-y question! Is t... Newer »
This thread is closed to new comments.