A CSS reset is a set of styles that is applied to the default styles of all HTML elements, effectively resetting them to a uniform baseline. The purpose of a CSS reset is to remove the inconsistencies across different browsers and ensure that the styles of all elements are consistent across all browsers.
Here’s a simple example of a CSS reset:
/* CSS reset */
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;
}Normalize.css, on the other hand, is a modern alternative to CSS resets that aims to make styles consistent across all browsers while preserving useful default styles. Normalize.css does not completely reset all styles to zero, but instead normalizes the styles of elements to a consistent baseline across all browsers. This approach allows for better consistency and improved accessibility, while still allowing for the use of useful default styles.
Here’s a simple example of Normalize.css:
/* Normalize.css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
...In summary, a CSS reset sets all styles to a uniform baseline, while Normalize.css normalizes the styles of elements to a consistent baseline across all browsers while preserving useful default styles.
