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

I am embedding telerik's radEditor in my page..its inheriting开发者_如何学Python 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 ?/

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 :)

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.

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

I had a similar problem and Azeo's #2 worked for me:

 function RadEditorLoad(editor, eventArgs) {

        // Set these Editor Styles to prevent them from being inherited
        // from the master page.  
        editor.get_contentArea().style.fontFamily = 'Arial';
        editor.get_contentArea().style.backgroundColor = 'White';
        editor.get_contentArea().style.textAlign = 'Left';
        editor.get_contentArea().style.padding = "5px";
    } 


  <telerik:RadEditor ...         OnClientLoad="RadEditorLoad">

Update: I ended up using the ContentAreaCssFile Property in favor of the solution above. As described in: http://demos.telerik.com/aspnet-ajax/editor/examples/settingcontentareadefaults/defaultcs.aspx. I'm only able to reset specific styles that are important to me, not all styles unfortunately.