Style to remove all styles

Question

Is there any way to apply a style that will effectively block the application of any applied or inherited styles for that object and any contained objects?

Answer 1

Actually - no... But you can try to use jQuery for this purposes.

$('.class').removeClass().removeAttr('style');

It should remove all classes from matching elements and clear style attribute. Though, it's untested +)

Answer 2

No. You'll have to override all other properties being set on it.

Answer 3

If you want to do this for testing/debugging purposes, have a look at the Firefox Web Developer add-on. It has functions for removing CSS for whole pages or individual elements and their contained elements, or for altering CSS on the fly whilst viewing the page.

If you are looking for a good CSS reset for production use, have a look at Tripoli. This is a set of CSS styles that will reset the default rendering in each browser to the same common base, to use as a starting point for applying your own styles. There are many other CSS resets around but Tripoli is my personal favourite.

Answer 4

Write a style class i.e clearall override all the attributes that you need to what you want as the default vaules. i.e

.clearall { display: block; clear: both; height: 1px; margin: 0 0 0 0; ... }

Now, you can use that class to

<div class"clear">
  <div class="awesome"> ..
  </div>
</div> 

<div class"clear">
   <div class="woooow"> ..
   </div>
</div>`

So now everytime that you need to reset the style, you can use that class

Answer 5

I would suggest to add at the end of your CSS code a complete reset code such as the one from Eric Meyer.

It should take care of erase most everything and and you can put your own code after that.

Answer 6

You can always can call !important on an element to override specificity inherits.

.wrapper p{color:red; background:blue;} .wrapper div p{color:blue !important; background:none !important;}

Answer 7

There‘s no one CSS property that turns off all other CSS properties. You’ll have to set each property to whatever value you want (for some CSS properties, e.g. font-family, there’s no “off” value — text has to be rendered in some font).

As for “that object and any contained objects” (emphasis mine), the * selector selects all elements. So, your CSS rule could look like this:

.turn-off-all-styles,
.turn-off-all-styles * {
    /* Disable every CSS property here */
}

As others have mentioned, check out Eric Meyer’s CSS reset for a good example of setting all CSS properties to defaults. If you add !important after each value, that should stop other CSS rules from interfering with this style, e.g.

.turn-off-all-styles,
.turn-off-all-styles * {
    margin: 0 !important;
    ...
}