homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

Resetting all CSS styles
How can I make sure other styles don't interfere

 5:21 am on Oct 28, 2007 (gmt 0)

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.



 7:06 pm on Oct 28, 2007 (gmt 0)

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


div { margin: 0!important; }

will override a previous

div ( margin: 10px; }


 7:26 pm on Oct 28, 2007 (gmt 0)

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 {

But somewhere in the page's style sheet they declared

h1 {
font-style: italic;

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.


 7:32 pm on Oct 28, 2007 (gmt 0)

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.


 7:50 pm on Oct 28, 2007 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved