Reset css styles for only div

Question

Well I have a big html document. And I want to embend control to this document but css styles of this control overlap by styles of big html document. How can I reset all styles for only div (and all nested divs)?

possible duplicate of [Reset/remove CSS styles for element only](http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only) — T.Todua, Feb 28 '14 at 13:02

score 19 · Answer 1 · answered Nov 29 '11 at 14:31

19

With the Yahoo reset http://yuilibrary.com/yui/docs/cssreset/

There is a "contextual" version which only reset elements which are decendent of .yui3-cssreset

e.g.

<div class="yui3-cssreset">
    <!-- Anything in here would be reset-->
</div>

answered Nov 29 '11 at 14:31

Alex KeySmith

16,657
11
74
152

Hi @MДΓΓБДLL glad you like it :-) – Alex KeySmith Nov 29 '11 at 14:40
This is the answer I would have written had you not done so already. No need for nasty `!important` hackery, or hand-rewriting a page-wide reset. – Matt Ball Nov 29 '11 at 14:42

score 1 · Answer 2 · answered Nov 29 '11 at 14:27

You would want to add a CSS rule to your style sheet that applies only to the control you are trying to embed; something like this:

#yourDivID
{
    display: block;
    border:0;
    color:black;
}

You will probably need more attributes in there to clear out any other styles that may be being applied, this is just an example.

Now any control you place inside that main div, you would have to create rules that specifically address those objects. For example:

#yourDivID div
{
    display: block;
    border:1px solid black;
}

score 0 · Answer 3 · answered Nov 29 '11 at 14:26

0

One solution (maybe not the best) is to use !important after the css-attribute to overwrite the style. Or you use a css reset tool and rewrite it for only the desired div

answered Nov 29 '11 at 14:26

Anonymous

3,679
6
29
40

score 0 · Answer 4 · answered Nov 29 '11 at 14:30

I think i understand what you mean, are they multiple stylesheets? if so put the new one underneath the old one in the HTML eg

<link type="text/css" href="/bightmldoc.css" />
<link type="text/css" href="/newdiv.css" />

or just put the new div code at the bottom of the stylesheet if you only have one. Without an example of what's going on it's hard to work out what the best course of action will be.

score 0 · Answer 5 · answered Nov 29 '11 at 14:33

I should say that you should not do the !important if you don't REALLY have do when it's considered a hack. The thing I would do is make a selector with more steps. If you have any ID's use them to specify your objects since ID's overrides classes. For an example if you use the first of my examples you will probably get your codes overwritten by other classes. But if you try to find out a longer path for your selector then you might get a better result.

.yourdiv {}

#main .rightcol .box .yourdiv {}

IF you REALLY need to then you might want to use !important but if you can try not to.

I hope this helps you a bit.

Reset css styles for only div

5 Answers5

Linked