How do you disable all styles on an element ? Any property to set all attributes of an element to none all in one go?

Question

I am embedding telerik's radEditor in my page..its inheriting css properties from the master page..like H2 is in blue color..its got background color...

what should I type in my custom css class (the one exclusively made for radEditor) so it over rides ALL the Master page's css properties and applies nothing to heading tags??

I wrote this:-

h2{color:black;background-image:none;}

still h2 tag doesn't appear smaller that H1 tag in the drop down list in my radEditor..it still is applying css from master page..do I need to search for ALL the attributes being applied in master page and set them to none one by one in my custom css file ?/

Answer 1

You can use the !important keyword in your styles to override any previously applied styles something like this:

h2{
   color:black !important;
   background-image:none  !important;
}

Having said that, it is generally not recommended because it might create problems for others applying the styles unless they figure out that ! important is being used.

Answer 2

There is no shorthand command for reset in CSS. You'd have to override every CSS property explicitly.

Answer 3

AFAIK, there's no such possibility in CSS. You have two options:

1: Select your H2 elements as specifically as possible and then apply your css to remove the styling. Pseudo code, as I do not know the structure of your HTML:

#master_page #page h2{font-style:none; etc...}

2: Use JavaScript to dynamically remove all formatting of a selected element. This solution however implies you could not restyle the element at all, so I guess it's not what you're looking for. just to be complete :)