0

I have a template, and I want to show that HTML template inside a div.

That HTML CSS template automatically inherits the CSS used in the application.

I want it not to inherit the CSS. I need to reset the styles for that one div completely...

Sample code:

<html>
    <head><title>hi</title>
        <link href="mystyle.css" />
    </head>
    <body>
        This is my website content

        <div id="template_holder">
           <table>
             <tr>
                <td>name</td>
                <td>Raja</td>
             </tr>
           </table>
        </div>
    </body>
</html>

In the above code the template_holder holds a table which inherits the styles from mystyles.css.

I don't want it to inherit it...

Improve this question
2

3 Answers 3

Reset to default
1

For this kind of situations an iframe may be the right choice.

Alternatively, you should add a class or id or some other referencing parameter to your page template main tag, and reference every CSS rule in your page to that main element only, by have every css selector start with that main reference. But this is something you may be unable to do if you don't have control over the template CSS.

Beware that showing a template inside a div in your page may contain duplicate IDs, for example many templates commonly use the same IDs for the same elements (#header, #footer, #main, #wrapper, ecc...). You can avoid both this with an iframe.

Edit

After seeing your code example, I would create a CSS reset specifically for your #template_holder div, eventually with the !important keyword so that every other element inside it will inherit the CSS of it.

Don't know if this will work, but it's worth giving it a try.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I'm not sure I understand the situation exactly but you should take a look at the !important css declaration, that could work.

edit: With the clarification in code what I suggested could look like 

#template_holder table {
    //override whatever like background-color:White!important;
}
Improve this answer

2 Comments

So ihave to override all the css elements? as my template may contain any css element
You don't know what unwanted css there might be? In that case this is probably not the best solution.
1

In this situation iframe usage is the best

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.