NORMALIZE
Firstly, normalize css is a collection of styles based on what the creator felt would look nice and keep it consistent across browsers. For example, within an <article>, <aside>, <nav>, and <section> tag, Chrome, Safari, and Firefox render <h1> tags with a lower font size and a different margin size than independent tags. In the instance of a <h1> tag inside an <article>, <aside>, <nav>, and <section>, these are the user agent styles in Chrome, Safari, and Firefox.
EXAMPLE:
:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
}
h1 { font-size: 2em; margin: 0.67em 0;}
In Chrome, Firefox, and Safari, adjust the font size and margin on ‘h1’ components in ‘section’ and ‘article’ contexts.
Advantages over Reset CSS:
- Instead of mismanaging everything, Normalize.css keeps useful defaults.
- Normalize fixes a few common issues that aren’t covered by reset.
- Modular
- Better Documentation
- Doesn’t congest your development environment
RESET CSS
Reset provides an alternative approach, claiming that the browser’s default styles are unnecessary. We’ll define any styles we need in the project based on our requirements. Moreover, “CSS Reset” clears any styles associated with the browser’s user agent. In the preceding example, with the <h1> to <h6> default styles, this technique works well: most of the time, we don’t want the browser’s default font-size or margin.
An Example of Reset CSS:
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;
}
Therefore, we declare all HTML tags to have no padding, no margin, no border, the same font-size, and the same alignments using the CSS Reset method. In addition, CSS Resets have the drawback of being unsightly: they contain a long chain of selectors and a lot of superfluous overrides. Even worse, while debugging, they are illegible.
SUMMARY
To sum it up, resetting appears to be a requirement for meeting specific design standards, particularly for large, non-boilerplate design projects. It may appear like normalization is a smart way to go when only thinking about online programming, however, websites are frequently a combination of web programming and UI/UX design standards.
