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>

michaelward82 · Answer 1 · 2013-11-04T14:08:59.203

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

score 3 · Answer 2 · answered Nov 04 '13 at 14:03

3

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

answered Nov 04 '13 at 14:03

Andrew

2,013
1
23
38

score 0 · Answer 3 · answered Nov 04 '13 at 14:06

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>

Gaurav Bhor · Accepted Answer · 2013-11-16T13:31:06.253

0

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

!important wins.
inline
internal
external

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

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

edited Nov 16 '13 at 13:31

answered Nov 04 '13 at 14:11

Gaurav Bhor

1,057
2
11
26

"Adding !important hampers your site's SEO". I've never heard that suggested. Do you have something to link to to back this up? I'll remove my downvote if you can provide a good link. – michaelward82 Nov 07 '13 at 16:49
`!important` hampers the flow of your CSS declarations which is a bad practice and should be avoided unless absolutely necessary. Bad practice -> Hampers SEO. http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css – Gaurav Bhor Nov 08 '13 at 05:30
While the use of !important may not be a best practice in many situations, it has no direct relation to SEO. – michaelward82 Nov 08 '13 at 08:36
No 'direct' relation to SEO. So, what are you implying? And I hope you read the rest of the answer before your downvote. – Gaurav Bhor Nov 08 '13 at 15:32
I'm not implying anything; I am stating that the use or abuse of `!important` has no direct impact on SEO. By 'direct' I mean that there are no practical scenarios that I am aware of where use of `!important` is penalised by search engines. The biggest problem with the use of `!important` is that it removes the C from CSS. That's an architectural issue for the dev(s) to wrestle with. A user may have issues in the rare circumstance where they wish to override a style. That said, it's still not an SEO issue. The downvote is for spreading FUD over the use of `!important` & its SEO impact. – michaelward82 Nov 14 '13 at 14:53

Make a no style class in CSS

4 Answers4