What is the difference between normalize css and reset css

Normalize.css and Reset.css are both CSS tools designed to provide consistent cross-browser default styles. Their primary purpose is to eliminate differences in default styles across browsers, thereby simplifying the work for designers and developers. However, they differ in their approaches and philosophies to achieve this goal:

Normalize.css

• Target: Normalize.css aims to make default styles more consistent across browsers while preserving useful defaults. Rather than removing all styles, it fixes inconsistencies between browsers and maintains good accessibility.
• Preserve styles: It preserves useful default styles rather than 'erasing' all styles. For example, elements like sup or sub render differently across browsers, and Normalize.css standardizes these styles while retaining their basic functionality.
• Fix browser bugs: It addresses common bugs in desktop and mobile browsers, such as the rendering of HTML5 elements and preformatted text.
• Modular: Typically, Normalize.css serves as a modular foundation, allowing additional styles to be layered on top of it.

Reset.css

• Target: Reset.css aims to remove all browser default styles, providing a clean canvas for design. It achieves this by applying uniform styles to almost all elements (e.g., setting margin and padding to 0).
• Reset styles: It tends to 'reset' all styles, meaning designers must redefine numerous styles from scratch.
• Consistency: Its core philosophy is to eliminate differences, ensuring all elements appear consistent across browsers, though this process also resets useful default styles to zero.
• Customization needs: When using Reset.css, developers typically need to customize extensive CSS rules on top of it to achieve the desired appearance.

Practical Example

Suppose you are working with a list element <ul>:

• With Reset.css, all <ul> list styles (including padding and bullet points) are removed, requiring you to manually add styles for each list.
• With Normalize.css, default list styles are standardized, but basic bullet points and indentation are preserved, meaning you only need to define specific list styles rather than rebuilding the entire list.

When choosing which to use, it generally depends on project requirements and personal preference. If you want complete control over every element and are willing to build your styles from scratch, you might prefer Reset.css. If you wish to retain some default styles and prioritize cross-browser consistency, Normalize.css is likely a better choice.

Normalize.css and Reset CSS are two distinct CSS utilities aimed at addressing cross-browser consistency issues, though they differ in their approaches and objectives.

Reset CSS is designed to establish a consistent baseline by removing all default styles applied by browsers. This ensures that all HTML elements start with no inherent styling, guaranteeing uniform presentation across different browsers. Using Reset CSS allows developers to work free from browser-specific defaults and build designs from scratch. A typical example is Eric Meyer's 'Reset CSS,' which eliminates margins, padding, font sizes, and other default styles.

For instance, Reset CSS may include the following rules to remove margins and padding from elements:

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;
}

In contrast, Normalize.css adopts a different strategy. Its purpose is to preserve browser default styles while correcting common cross-browser inconsistencies and resolving typical bugs. Normalize.css aims to retain useful default values rather than stripping all defaults. It also fine-tunes styles for specific elements to ensure similar visual presentation across different browsers.

For example, Normalize.css may include rules to standardize default styles across browsers instead of completely removing them:

css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  line-height: 1.6;
  font-family: sans-serif;
}

ol,
ul {
  list-style: none;
}

In summary, Reset CSS is intended to begin with a completely consistent blank canvas, while Normalize.css seeks to maintain consistency across browsers while preserving useful default styles. The choice between these tools depends on your project requirements and personal preferences.

First, reset.css is the least recommended library because it overrides the default HTML styles and sets the values of margins, padding, and other properties to 0. For example, you will find that <H1> appears identical to <H6>. On the other hand, Normalize.css preserves the standard HTML structure and corrects most inconsistencies. For example, it resolves the inconsistency in form display across different browsers by adjusting the styles to ensure consistent rendering across all browsers.

Normalize.css is primarily a set of styles based on the author's preferred design to ensure consistency across browsers. Reset.css essentially removes styles from elements to give you better control over the styling of all elements. I use both. Some styles come from Reset.css, while others come from Normalize.css. For example, Normalize.css includes a style that ensures all input elements have the same font, which is not present between text inputs and text areas. Reset.css lacks such styles, so inputs have different fonts, which is typically unnecessary.

Main difference:

• CSS Reset aims to strip out all built-in browser styles. Standard elements like H1 to H6, p, strong, em will ultimately appear identical with no styling at all. Then you should add all the necessary styling yourself.
• Normalize CSS aims to ensure consistency across different browsers for built-in browser styles. Elements like H1 to H6 will consistently appear bold and larger across browsers. Then, you should only add the required styling differences for your design.

If your design a) follows common conventions in typography, and b) Normalize CSS is suitable for your target audience, using Normalize CSS instead of CSS Reset will result in smaller and faster-to-write CSS.

Main differences are:

1. Normalize.css preserves useful default values rather than resetting all styles. For example, elements like sup or sub function correctly (and become more robust) when Normalize.css is included, whereas with Reset.css, they appear visually indistinguishable from regular text. Therefore, Normalize.css does not impose a visual baseline (homogeneity). This may not suit everyone's taste. The best approach is to try both and see which suits your preferences.

2. Normalize.css corrects common issues beyond the scope of Reset.css. Its scope is broader than Reset.css and provides fixes for common problems, such as: display settings for HTML5 elements, lack of inheritance in form elements, correcting font-size rendering for pre, SVG overflow in IE9, and styling issues for button on iOS.

3. Normalize.css does not disrupt your development tools. When using Reset.css, a common issue is the large inheritance chains displayed in browser CSS debugging tools. Due to targeted styling, this is not a problem for Normalize.css.

4. Normalize.css is more modular. The project is broken down into relatively independent parts, so if you know your site will never need these parts (e.g., form normalization), you can easily remove them.

5. Normalize.css has better documentation. The code is inline and more comprehensively documented on the GitHub Wiki. This means you can find the purpose of each line, why it's included, browser differences, and run your own tests more easily. The project aims to help people understand how browsers default-render elements and make it easier to contribute improvements.