Many projects are used to using CSS reset rules within their stylesheets as a way of resetting HTML elements to a base set of rules.
The resets, which can be found in many boilerplate CSS files along with Normalize ensures that the HTML elements are displayed consistently in browsers, including support for older browsers.
Here are some of the rules introduced on elements that get ‘reset’ and why they are necessary.
body {
margin: 0;
}The most common reset: removing the default margin from the <body> element. No one wants a thin white strip around their website, right?
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}HTML5 display definition rules ensure that the HTML5 elements are displayed correctly in older versions of IE and Firefox.
a {
background-color: transparent;
}This removes the grey background from links when clicking on them in IE 10.
a:active,
a:hover {
outline: 0;
}This second anchor element rule ensures that the dotted outline you get when an anchor element has been clicked does not show.
b,
strong {
font-weight: bold;
}Ensuring that the <strong> element uses font-weight: bold addresses an issue where in Firefox 4+, Safari, and Chrome, the default rule was font-weight: bolder meaning that fonts were bolder in these browsers compared to others.
img {
border: 0;
}This image rule removes the border when inside an anchor element in IE versions 8, 9 and 10.
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}For <fieldset> elements, this rule defines a consistent border, margin, and padding across all browsers.
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}Any finally, the above table rules ensure that most spacing between table cells are removed in all browsers.
There are more resets defined in Normalize and other CSS boilerplates, and all are important so that your website displays correctly in as many browsers as possible.