Basic CSS reset
What is a CSS reset?
A basic CSS reset is a short CSS rule that resets all of the styles within a HTML document to a baseline that is consistent across all browsers.
If you’ve ever written any HTML or CSS for a web page you may have noticed that not all browsers display elements in the same way. That’s because all browsers have default styles that make any element that is not styled display legibly. So for example links appear blue and underlined, visited links appear purple.
Why the need to reset browser defaults?
So why would you want to use a reset in your CSS document? All browsers have their own settings for margins and padding that they will apply if none are found in the document. Create and unstyled HTML page and preview it in Firefox and Internet Explorer to see the difference. Using a consistent baseline you can restyle your document, adding margins and padding to the elements of your page knowing that it will appear exactly how you intended across all browsers. The extra work involved is worth the head aches and head scratching later on.
How to write a basic CSS reset
Here’s a basic reset you can use as part of your CSS document.
This will set all of the padding and margin to zero allowing you to specify your own values for each of the elements in your design.
Add this reset to the top of your CSS document. You then have complete control over margins and padding for every element on your page.
So it would look like this in your CSS file.
/* CSS Document */
After you’ve added some content your page would look like this. Notice how everything is bunched up. No styling has yet been added to any of the elements on this page.
You can then continue to write your CSS rules as you would normally, adding padding and margins for the <p> and heading tags for example.
For a complete CSS reset, Eric Meyers reset CSS tool is worth checking out.