Resets

What are they?


All browsers have a default set of code that decides how they interpret HTML and CSS. However is varies between browsers. So in order to give users the most consistent experience you want to use some kind of reset on your website to level the playing field. It does this by setting the defaults of everything to something of your own choosing instead of the browser defaults. Because you are setting defaults it is important to consider this before you start using any CSS on your page. Adding a reset in later may cause things change and have be redone.


How Do I Use a Reset?


All browsers have a default set of code that decides how they interpret HTML and CSS. However is varies between browsers. So in order to give users the most consistent experience you want to use some kind of reset on your website to level the playing field. It does this by setting the defaults of everything to something of your own choosing instead of the browser defaults. Because you are setting defaults it is important to consider this before you start using any CSS on your page. Adding a reset in later may cause things change and have be redone.

The most basic reset you can use is setting your margins and padding to 0 pixels. It is recommended that this step be placed in an external stylesheet; although, it can be embedded as well.

To do this you would type:

html, body { margin:0;
padding:0;
}

To see more about margins and padding skip ahead to Borders/Margins/Padding.

While this method will fix a large amount of issues you may run into, it will not fix them all. In order to have a more complete reset of your CSS you would want to use Eric Meyer’s CSS Reset.

This is something that while it can be embedded it should be created as an external stylesheet. Simple copy and paste the code he has provided into a new CSS document. Then save it, and embed it as I have already shown you in the basics.