What is the difference between Normalize.css and Reset CSS?

Question

I know what CSS Reset is, but recently I heard about this new thing called Normalize.css

What is the difference between Normalize.css and Reset CSS?

What is

Answer 1

This question has been answered already several times, I'll short summary for each of them, an example and insights as of September 2019:

• Normalize.css - as the name suggests, it normalizes styles in the browsers for their user agents, i.e. makes them the same across all browsers due to the reason by default they're slightly different.

Example:

tag inside

by default Google Chrome will make smaller than the "expected" size of

tag. Microsoft Edge on the other hand is making the "expected" size of

tag. Normalize.css will make it consistent.

Current status: the npm repository shows that normalize.css package has currently more than 500k downloads per week. GitHub stars in the project of the repository are more than 36k.

• Reset CSS - as the name suggests, it resets all styles, i.e. it removes all browser's user agent styles.

Example: it would do something like that below:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

Current status: it's much less popular than Normalize.css, the reset-css package shows it's something around 26k downloads per week. GitHub stars are only 200, as it can be noticed from the project's repository.