How to apply CSS to iframe?

Question

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

Answer 1

Following are two different things here: Style of the iframe block and the style of the page embedded in the iframe you can also set the style of the iframe block the usual way like this:

<iframe name="iframe1" id="iframe1" src="empty.htm" 

        frameborder="0" border="0" cellspacing="0"

        style="border-style: none;width: 100%; height: 120px;"></iframe>

In the iframe, the style of the page embedded must be either set by including it in the child page like this:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

Otherwise, it can be loaded from the parent page with Javascript like this:

var cssLink = document.createElement("link");

cssLink.href = "style.css"; 

cssLink.rel = "stylesheet"; 

cssLink.type = "text/css"; 

frames['iframe1'].document.head.appendChild(cssLink);

Note: This does not work cross-domain unless the appropriate CORS header is set.