Browsers have a default set of CSS styles they use for rendering elements. Some of these styles can even be customised using the browser’s settings to change default font face and size definitions, for example. The styles contain the definition of which elements are supposed to be block-level or inline, among other things.
Because these default styles are given some leeway by the language specifications and because browsers may not follow the specs properly they can differ from browser to browser.
This is where normalize.css comes into play. It overrides the most common inconsistencies and fixes known bugs.
What does it do
- Preserves useful defaults, unlike many CSS resets.
- Normalizes styles for a wide range of elements.
- Corrects bugs and common browser inconsistencies.
- Improves usability with subtle modifications.
- Explains what code does using detailed comments.
So, by including normalize.css in your project your design will look more alike and consistent across different browsers.
Difference to reset.css
You may have heard of
reset.css. What’s the difference between the two?
While normalize.css provides consistency by setting different properties to unified defaults, reset.css achieves consistency by removing all basic styling that a browser may apply. While this might sound like a good idea at first, this actually means you have to write all rules yourself, which goes against having a solid standard.