CSS Tip: Reset Methods

The browser will give elements such as the body, headings, paragraphs and lists certain margins, line heights and padding by default. If we don’t reset any of the default CSS parameters, the browser will use its own default parameters instead.

Since different browsers have different default CSS, a site layout can end up looking inconsistent, depending on which browsers you use. That’s why it’s usually good practice to use a CSS reset, because it gives us a good baseline for laying out pages by completely removing certain browser style inconsistencies such as margins, padding, line height, and heading font sizes.

There are two common CSS reset methods used today, Eric Meyers’ reset CSS and normalize.css.

Reset CSS is a CSS reset method that zeros out every element default browser styles. Now depending on the size of your project, this zeroing out approach might not be the best approach Since we’re overpowering all of the default CSS, a lot of elements will now be presented in an unreadable way until we spend the time writing more CSS to produce the new default values.

If you’re working on a large app or website and we want to save time by not rewriting a lot of that CSS, then something like normalize.css would be more suitable. It brings all browsers down to a level playing field by preserving useful browser default styles instead of removing all default styles from every element, like CSS reset.

But, it also styles elements with no common default styles, so that they look consistent in every browser. This is commonly used in you’ll see used in CSS frameworks like Bootstrap and Foundation.

Leave a Reply

Your email address will not be published. Required fields are marked *