CSS reset

When you start defining your CSS properties you’ll probably notice that most elements already have default CSS properties applied to them. You can see an example of this by creating a minimal HTML document with no CSS applied. One of the things you should notice is that your page content isn’t quite touching the border of your browser – this is because the browser applies default CSS to the HTML elements. The same thing applies to links, form elements, tables and most other HTML elements.

Sometimes it’s good to be able to start from scratch and get rid of all of these preset CSS defaults. Why would you want to do this? Well, clearing the defaults and starting from scratch is much easier than hunting down which property is making your menu push a few pixels out of place.

Reset your CSS

Although you could go through each element individually and reset its individual properties, why not save yourself some time and effort by using the following CSS to reset every element.

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;

You should include this CSS snippet into the top of all of your stylesheets.