CODEWITHSUNDEEP
htmlcssiframe
Dinesh Kanivu
Dinesh Kanivu

Reputation: 2587

How can i give CSS to HTML tag inside an Iframe

Here is My demo

HTML

<html>
    <head></head>
    <body>
          <h1>Outer HTML</h1>    
       <iframe src="">        

             <html>

                 <head></head>
                 <body>
                     <h1>InnerHTML</h1>    

                 </body>


             </html>




        </iframe> 

    </body>

</html>

CSS

html{background:green}
iframe{border:1px #fff solid; }
iframe html{background:red}

I would like to give css for <html> tag inside an iframe. How can i do that. In my Code iframe html{background:red} this CSS not working.

Upvotes: 0

Views: 1143

Answers (3)

Kurenai Kunai
Kurenai Kunai

Reputation: 1902

Applying css on iframe contents in cross-domain does not work.

You can try one of these:

The style of the page embedded in the iframe must be either set by including it in the child page:

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

Or it can be loaded from the parent page with Javascript:

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink .rel = "stylesheet";
cssLink .type = "text/css"; 
frames['frame1'].document.body.appendChild(cssLink);

Upvotes: 2

Aru
Aru

Reputation: 1870

you can set background to the iframe or a class to the iframe instead..

Css

html{background:green}
iframe{border:1px #fff solid; }
iframe{background:red;}

Fiddle Demo

Upvotes: 1

Martin
Martin

Reputation: 22760

The reason for iframes is that code inside the iframe should be in another page, that is called from the outer page but not necessarily on direct show to the end user, so your iframe needs to have a page it calls - on that page that is called, then you can reference the CSS in the <head> section to use CSS display correctly.

Thus:

page.htm

 <html>
    <head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" /> 
</head>
    <body>
          <h1>Outer HTML</h1>    
       <iframe src="two.htm">        
        </iframe> 

    </body>
</html>

stylesheet.css

html{
background:green
}

iframe{border: #fff 1px solid; }

two.htm:

          <html>
                 <head>
<link href="inner.css" rel="stylesheet" type="text/css" />
</head>
                 <body>
                     <h1>InnerHTML</h1>    
                 </body>
             </html>

inner.css

This is the style sheet that is applied ONLY to the contents of the iframe:

 html{
    background:red
}

Upvotes: 1

Related Questions