Resetting all CSS styles

How can I make sure other styles don't interfere

[formasfunction]

I have an odd situation where I need to add CSS and HTML to preexisting web pages without being able to modify their existing CSS. The problem I'm having is that some of the pages have styles that are interacting with my elements and causing them to go awry. My elements are encased in a div and I was thinking that I could cancel out any imposing CSS by resetting all styles on that div. What would be the best way to go about this?

I started out using the Yahoo UI reset CSS but it doesn't cover everything, just browser biases, and for some reason I can't get my subsequent margins to be recognized within the enclosing div where the reset is happening.

[londrum]

have you tried just sticking!important after the rule you want to change? that will override an existing rule

so

div { margin: 0!important; }

will override a previous

div ( margin: 10px; }

[formasfunction]

Hey Londrum, the bulk of my problem isn't getting a single one of my rules to override an existing one, it's anticipating all the modifications that might happen in any given situation. For instance if I want:

#my_div h1 {
color:white;
font-size:30px;
}

But somewhere in the page's style sheet they declared

h1 {
color:black;
font-style: italic;
border:dotted;
margin-right:20px
}

The color in #my_div won't have any issues overriding the page's main color but there are suddenly other styles (font-style, border, etc) there that I took for granted were at their defaults and aren't. It's a matter of anticipating every single style that theoretically could be a applied to an element and canceling them out with declarations on my enclosing #my_div.

[londrum]

you could try using the universal selector - * - or combinations of it.

something like this might work:

* { margin:0!important; padding:0!important; border:0!important; font:whatever!important; }

which will apply to every tag, or maybe:

div * { margin:0!important; padding:0!important; border:0!important; font:whatever!important; }

which will apply to every kind of tag contained within a div etc.

[jetboy]

There's no way to do this automatically without redeclaring every possible CSS option on you container and its descendants, either with high specificity or using!important. It's all a bit brute force ...

Why not install the Web Developer Toolbar on Firefox, and use the View Style Information function to show all CSS styles that effect an individual element. This'll show you what needs overriding on an element by element basis.