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;
    ...
}