Div with external stylesheet?

css html styles innerhtml
LethalPapercut picture LethalPapercut · May 3, 2013 · Viewed 53k times · Source

I have been given an external stylesheet (.css file) that may not altered in any way whatsoever. However I need to apply this stylesheet to a single div and therefore the contents of the div in my already existing webpage. I am currently reading the contents of the stylesheet as text into a blank style tag (using .innerHTML) within the div I need to affect but this still affects the entire web page rather than just the single div. Could someone please help with this?

Answer

Gareth Cornish picture Gareth Cornish · May 3, 2013

The IFRAME solution works like this:

In your main HTML file, you'll have your DIV:

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

Style that as you need it. The divcontent.html file should be a complete HTML file, including the content of the DIV tag, and a LINK using your external stylesheet:

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>

Related questions

CSS align images and text on same line

I have been searching and trying different methods for hours now. I just can't seem to get these two images and text all on one line. I want both the images and both text to all be on one line …

Read More
How do I style (css) radio buttons and labels?

Given the code bellow, how do I style the radio buttons to be next to the labels and style the label of the selected radio button differently than the other labels? Also let me state that I use the yui …

Read More
Removing newline after <h1> tags?

I am having a problem with removing linebreaks after the <h1> tag, as everytime it prints, it adds a line break straight after it, so something like <h1>Hello World!</h1> <h2>…

Read More