title: Override body style for content in an iframe
body: <p>How can I control the background image and colour of a body element within an <code>iframe</code>? Note, the embedded body element has a class, and the <code>iframe</code> is of a page that is part of my site. </p>
  
  <p>The reason I need this is that my site has a black background assigned to the body, and then a white background assigned to divs that contain text. A WYSIWYG editor uses an <code>iframe</code> to embed content when editing, but it doesn't include the div, so the text is very hard to read. </p>
  
  <p>The body of the <code>iframe</code> when in the editor has a class that isn't used anywhere else, so I'm assuming this was put there so problems like this could be solved. However, when I apply styles to <code>class.body</code> they don't override the styles applied to body. The weird thing is that the styles do appear in Firebug, so I've no idea what's going on! </p>
  
  <p>Thanks </p>
  
  <p>UPDATE - I've tried @mikeq's solution of adding a style to the class that is the body's class. This doesn't work when added to the main page's stylesheet, but it does work when added with Firebug. I'm assuming this is because Firebug is applied to all elements on the page whereas the CSS is not applied within iframes. Does this mean that adding the css after window load with JavaScript would work? </p>