I have an external CSS file (I cannot change it at all) which I need to use in my HTML file, but I want the CSS to only affect a section of my HTML. (For example everything in <div id="externally_styled"></div>)
How is this possible, again, without changing the CSS file (and the CSS file contains also general styles that affect body tags etc)
You'd probably have to use an iframe with a page containing only the HTML you want styled and a reference to the stylesheet. This would mean the general styles wouldn't be applied to the containing page, but it sounds like that's what you want.
One way that springs to mind is to have the "to-be styled" portion of your HTML exist in a completely separate file and then pull it in via an iframe that uses the CSS from the external file.
The only thing i can think of is to re-render the content from your DIV to an Iframe.
Any classes or style-declarations attached to a tag will override the declarations in the CSS-file.
Just add your own style-declaration to a tag:
<div style="<your own declarations>">
...
</div>
Either use classname of the class that you have created for your specific section or use proper parent child relationship css that will render only when it falls under the parent child relationship.
You can overwrite the general styles that you don't want to be applied to your HTML document. This may be a good idea if the CSS if not that extensive.
The way to overwrite an style is using the keyword important!.
e.g:
original stylesheet:
body {
color: #000000;
}
your stylesheet:
body {
color: #CCCCCC !important;
}
You can find more information here.
I'd guess any client side solution is going to be messy.
Can you use a server side solution where you suck in the external CSS file and append a class selector to the start of each rule? I'm sure this would be easy enough with regex.