- April 20, 2015
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.