title: Adding CSS text to iframe contents using Javascript
body: <p>I'm building a HTML editor using TinyMCE but the HTML file (before TinyMCE has any effect) has a style element in the head. I'm then using several TinyMCE instances on that page, so of course those CSS rules in there aren't being applied to TinyMCE.</p>
  
  <p>I've managed to dump the CSS into a variable, and I've managed to add a <code>&lt;style&gt;</code> element to the iframe with the css inside it, however it doesn't affect the styles of the elements inside the frame at all. EG <code>h2{color:red;}</code> has no effect, even though I can see it there using Firebug.</p>
  
  <p>This is the code I'm using to get the stylesheet content:</p>
  
  <pre><code>if(editor.styleSheets.length &gt; 0){
   var css = editor.styleSheets[0];
   if(!is_ie){
    css.cssText = '';
    for(var i=0; i&lt;css.cssRules.length; i++){
     css.cssText += '\n' + css.cssRules[i].cssText;
    }
   }
   stylesheet = css.cssText;
  }
  </code></pre>
  
  <p>Which works, stylesheet contains a string of CSS rules. However, I can't insert it! Any ideas?</p>