What is CSS reset, and why do I need one?

All the major browsers like Firefox, Internet Explorer, Opra, Chrome, etc. comes with their own default CSS file. These are css values that are aplied to all web pages, to make them look better and more readable, applying margins, paddings line-heigths and so on. The idea is good, but since the makers of the browsers decided to go their own ways, instead of communicating with each other to create some kind of standard, this will make your design behave different from browser to browser.

Starting with a blank canvas

The way to get around this issue is to reset all the important css values, removing the inconsistent styling of HTML elements provided by browsers. This allows you to start from scratch and give you something to build on. So if you want a margin on some element, you define it your self, instead of having the browsers decide what your page should look like.

Several ways to reset your CSS

There are several approaches to resetting the CSS; you could include a reset.css file, either from your own server or from a CDN for optimization, or you could place the reset rules in the top of your main CSS file, wich I think is the best practise.

The Eric Meyer Reset
The reset styles given here are intentionally very generic. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on.

/* 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;

Other ways to reset css