code snipit…
Monday, September 22nd, 2008I was working on a project for a friend who wanted to use css styles on some product pages of theirs. They could not easily add the css as an external link, which resided on their own site (different from the site with the product pages). This would not be a problem except that they wanted their css to cover about 400 pages. As you can imagine that would make maintaining the pages much more difficult to maintain. After much head banging to try and get ajax and iframe solutions to work I came across a very cool trick.
Just create a javascript function that inserts a link tag pointing to your external css. This worked like a charm in IE6, IE7 and FF3.
function loadCSS(loc) {
var headID = document.getElementsByTagName(“head”)[0];
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = loc;
cssNode.media = ‘screen’;
headID.appendChild(cssNode);
}
<span class="pun">loadCSS("http://example.com/external.css");
</span>
The obvious drawback to this approach is that if someone has javascript turned off then none of your css will show up. But in this case the site relied on javascript a lot. If you are interested in more information on this and other cool tricks you can read more here.

