Prevent Iframe From Taking Parent Css

How is it possible to prevent a iFrame object from taking on css properties from the main page. (or I think that is what it is doing) Specifically: I'm creating an iframe object in

Solution 1:

How is it possible to prevent a iFrame object from taking on css properties from the main page.

Do nothing. iframes contain independent documents, CSS will not cascade into them.

I'm trying to change the opacity of the main page when the iFrame is displayed but for some reason it changes the opacity of the iFrame too

opacity changes the rendered content of the element to which it applies, not each individual descendent of that element.

Don't put the iframe inside the element you are setting the opacity of. You'll probably have to use absolute positioning to get the layout you want.