What is CSS Reset? Why to use CSS Reset? How to use CSS Reset?

CSS Reset is a common word used when implementing a page from a demo mockup. In this article, I will talk about CSS Reset in great detail.

What is CSS Reset?

Usually, different browsers tend to display the default properties of an html element in a way that makes sense to them. This can lead to inconsistency of the web page display in different browsers. CSS Reset is a way to reset the default html properties such as ” p, h1, h2,” etc. so that they display the same on different browsers.

Why to use CSS Reset?

It’s main aim is to display the page evenly across different browser and to reduce the inconsistencies in the html elements. If this is not applied, the default margins, heading sizes, line heights, etc. that a browser displays may vary in the way that the other browser displays it. Using CSS Reset is usually the first step when developing a web page from a mockup (after the web page slicing is done) and the html markup is coded.

How to use CSS Reset?

There is already a CSS Reset developed by our friend, Meyer. You may simply copy the CSS below and paste it your CSS file, before you write any additional code. Make sure that this code “always” appears at the top in your CSS file or your existing styles would be overwritten and you would be left wondering with what went wrong.

Here is the CSS Reset:

/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

That’s it!

Hope this article has helped you understand what css reset is and how it can help you in your web design projects. If you use any other files to reset the CSS styles on your website, please feel free to share resources by commenting below.

Reference: http://meyerweb.com/eric/tools/css/reset/