how to load css for a div?

I have a div- workarea, where, I want to load contents of body of a template. I could load the content, but how to load css of the template. If I tried to load it, it overrides the default css of the page into which I'm loading the template's body c开发者_StackOverflowontent. I don't want to use iframes in my project.

Thanks in advance

Another alternative is to create a reset stylesheet just for that div container. Put aa id selector on the container div in which you load content and use that ID as a prefix for styles you use in the template.

<div id="template_content"></div>

and css as

#template_content h2 {....}    
#template_content p {...}

If you cannot do this than your only option is iframe.

Your only simple option here is to use an <iframe>, styles cascade down, that's just how they work and were intended to work, if you want a section of the page with drastically different styling that also doesn't inherit, an <iframe> is the perfect tool do this.

Many people think frames are bad, that that's a different thing from iframes, no matter which side of the line you're on <iframe> elements are perfectly legitimate to use here. Why try to solve the problem in a very round-about way when the perfect tool for the job is laying there ready to use?

For example this is how almost every rich-text-editor works in a page, via an <iframe>, for many reasons but to keep the styling separate is one of them :)

Give Some id to that div like WorkArea. Now in css file, write your styles and from. Do not attach anything to any divs of the body from css, using body as parent class

might be hard but give the display or preview area important dominance...

like...

#template_content {
background: green !important;
}

then when you load in another style sheet, #template_content's background cannot be changed unless you have !important defined on the stylesheet you are loading in.