CSS Reset Class–Standardizes Browsers




- April 20, 2015

Rest of the Story:

You might think that such a tiny piece of HTML would display exactly the same way in all web browsers. Firefox, Internet Explorer, Chrome and Opera all have their default implementations of css. The following reset class can be used in your pages to bring them all down to a common base.

.reset a,          .reset abbr,     .reset  acronym,  
.reset address,    .reset applet,   .reset  big,  
.reset blockquote, .reset body,     .reset  caption,  
.reset cite,       .reset code,     .reset  dd,  
.reset del,        .reset dl,       .reset  dfn,  
.reset div,        .reset dt,       .reset  em,  
.reset fieldset,   .reset font,     .reset form,  
.reset h1,         .reset h2,       .reset  h3,  
.reset h4,         .reset h5,       .reset  h6,  
.reset html,       .reset iframe,   .reset  img,  
.reset ins,        .reset kbd,      .reset  label,  
.reset legend,     .reset li,       .reset  object,  
.reset ol,         .reset p,        .reset  pre,  
.reset span,       .reset q,        .reset s,  
.reset samp,       .reset small,    .reset  strike,  
.reset strong,     .reset sub,      .reset  sup,  
.reset table,      .reset tbody,    .reset  td,  
.reset tfoot,      .reset th,       .reset  thead,  
.reset tr,         .reset tt,       .reset  ul,  
.reset var {  
   margin         :0;  
   padding        :0;  
   border         :0;  
   outline        :0;  
   font-family    :inherit;  
   font-style     :inherit;  
   font-weight    :inherit;  
   font-size      :100%;  
   vertical-align :baseline;  
}  
.reset address,     .reset ar,       .reset  caption,  
.reset cite,        .reset code,     .reset  dfn,  
.reset em,          .reset strong,   .reset  th,  
.reset v {  
   font-style     :normal;  
   font-weight    :normal;  
}  
.reset h1,          .reset h2,       .reset  h3,  
.reset h4,          .reset h5,       .reset  h6 {  
   font-weight    :normal;  
   font-size      :100%;  
}  
.reset blockquote:after, .reset  blockquote:before,  
.reset q:after,          .reset q:before {  
   content        :'';  
}  
.reset caption,     .reset th,       .reset  td {  
   font-weight    :normal;  
   text-align     :left;  
}  
.reset              .reset fieldset, .reset img {  
   border         :0;  
}  
.reset abbr,        .reset acronym {  
   border         :0;  
}  
.reset ol,          .reset ul {  
   list-style     :none;  
}  
.reset body {  
   line-height    :1;  
   background     :#ffffff;  
   color          :#000000;  
}  
.reset  table {  
   border-collapse:separate;  
   border-spacing :0;  
}  
.reset:focus {  
   outline        :0;  
}  
  

The above css class ‘reset’ can be used to clear all formatting within a block of html or as is often the case can be applied within the html tag i.e. <html class=”reset”></html>

Once you do this, your whole web page will lose almost all its styling, ready for you to provide the styles you need.