Dave Woods - Freelance Web Design Warwickshire

Reset CSS

Please note: There is an update to this article available here: CSS Reset

In recent years I’ve always used the global reset method in order to reset padding and margin’s throughout an HTML document.

I’ve always known that this has some issues with it when dealing with forms and am starting to come round to Eric Meyer’s way of using a baseline css file in order to reset the specific elements that you want to set as apposed to just assuming that all should be zero.

Eric Meyer suggests the following CSS file as a starting point which I think I’m going to start adopting to my work and see if it solves more problems than the global selector.

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

Over the next few weeks, I’m planning on expanding on this to create a default stylesheet that can be used as a starting point for all projects which I’ll be happy to share once it’s complete.

Please note: There is an update to this article available here: CSS Reset