How to make CSS file affect only HTML section

Question

I have an external CSS file (I cannot change it at all) that I need to use in my HTML file, but I want CSS to affect only part of my HTML. (For example, everything in <div id="externally_styled"></div> )

How is this possible, again, without modifying the CSS file (and the CSS file also contains general styles that affect body tags, etc.).

Answer 1

You will probably have to use an iframe with a page containing only the HTML you want to create and a link to the stylesheet. This would mean that the general styles would not apply to the content page, but that sounds like what you want.

Answer 2

Any classes or style declarations attached to the tag will override the declarations in the CSS file.

Just add your own style declaration to the tag:

 <div style="<your own declarations>"> ... </div> 

Answer 3

You can overwrite common styles that you do not want to apply to your HTML document. This might be a good idea if CSS, if not so extensive.

The style rewrite method uses the important! keyword important! .

eg:

original style sheet:

 body { color: #000000; } 

Your stylesheet:

 body { color: #CCCCCC !important; } 

You can find more information here .

Answer 4

I assume that any client solution will be dirty.

Can you use a server-side solution where you draw in an external CSS file and add a class selector to the top of each rule? I am sure it will be pretty easy with regex.

Answer 5

One of the ways that comes to mind is to have the "ready-made style" of your HTML code in a completely separate file, and then pull it through an iframe that uses CSS from an external file.

Answer 6

The only thing I can think of is to re-render the contents from your DIV into an iframe.

Answer 7

Either use the class name for the class created for your particular section, or use the correct css child relationships that will only appear when they fall under the parent child relationship.

Answer 8

You can apply the style using "! Important" in your css codes.

take a look at this example. http://www.craiglotter.co.za/2010/01/21/important-css-how-to-force-one-style-above-another/