Make a no style class in CSS

Question

I want to make a nostyle class in CSS. So that any css written in my style sheet can be overlapped with this class, where i don't want any style. I used the below code, which is not working.

<style type="text/css">
  .nostyle {
          margin: 0;
          padding: 0;
          border: 0;
          outline: 0;
          font-size: 100%;
          vertical-align: baseline;
          background: transparent;
        }   
   </style>

Answer 1

You are probably suffering from CSS specificity rules where other rules override you class, because they are more specific.

Consider:

<div id="col1">
    <div class="rule1 another-rule">
        Test
    </div>
</div>

<style>
    .rule1 {
        margin: 0;
    }

    #col1 .another-rule {
        margin: 10px;
    }
</style>

In this situation, the margin on the styled DIV is always 10px because the rule carries more weight.

To overcome this, you may use the !important feature of CSS. Try

.nostyle {
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      outline: 0 !important;
      font-size: 100% !important;
      vertical-align: baseline !important;
      background: transparent !important;
    }   

Here's a great guide to how CSS Specificity works:

CSS Specificity: Things You Should know

Answer 2

The styles are probably being overwritten. Add !important after each style to give them a greater weight.

Your css would look like:

.nostyle {
    margin: 0 !important;
    padding: 0 !important;
    ...
}

Answer 3

Adding !important is a bad practice. You should have a look into CSS Priorities. Here is a simple list to define priorities:

1. !important wins.
2. inline
3. internal
4. external

If there are rules at the same level your priorities will be as follows:

1. The more specific rule wins EG: div span #abc .class
2. Rule written towards the end wins where rules are equally specific.

Answer 4

you can do that for no classes but your css have to look more like this:

 <style type="text/css"> 
 a,a:hover,div,p,font,table,li,ul,ol {
      margin: 0;
      padding: 0;
      border: 0;
       outline: 0;           font-size: 100%;
      vertical-align: baseline;
       background: transparent;
     }       </style>