Div with external stylesheet?

Question

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 1

If you have access to server-side scripting (eg: PHP), you could create a script that loads the external stylesheet, and appends a class name in front of every entry. Then apply this class to your DIV tag. So, if the CSS includes:

p { font-size: 12px; }

You'd modify that to:

.mydiv p { font-size: 12px; }

And format your DIV as

<div class="mydiv">...</div>

You would then load the script as a stylesheet, rather than the external stylesheet directly.

<link rel="stylesheet" href="path/to/internal/script.php" />