Resetting browsers (default)CSS

What is Reset CSS?

The CSS rules which are used to reset default styling of all HTML elements provided by the browser is called reset CSS.

Why resetting the CSS is so important?

Some of the HTML elements are styled default by the browsers and each browser will have the own default styling of HTML elements, this makes us write browser-specific style handling.

As a developer, we expect our page layout by what we defined in our CSS, and sometimes we may encounter the different styling and get confused about what causes this different styling. So before we start styling our sites it is always good to reset the default styles provided by the browser.

Some examples:

• <ul>, <ol> elements will have margins and padding by default.
• <a>(anchor tag) will have some default colour and text decoration by default.
• <h1><h2><h3><h4><h5><h6>(heading tags) will have the font size by default.

Note: These defaults are applied by the browser and differs based on the browser.

Below are the default styles that each browser provide

Firefox’s reset CSS

https://hg.mozilla.org/mozilla-central/file/tip/layout/style/res/html.css

Safari’s reset CSS

https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Chrome’s reset CSS

https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css

Microsoft IE’s reset CSS

https://web.archive.org/web/20170306080528/http://www.iecss.com/

Microsoft Edge’s reset CSS

https://web.archive.org/web/20161031003455/http://www.iecss.com/edgehtml-13.10586.css

How can we write the CSS which resets the default styles provided by the browser?

We can override the styles by selecting all the HTML elements having most of the values of your choice as provided in the below example.

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, 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, menu, nav, output, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
}

Also, we can reset the box-sizing property using below code

*,
*::before,
*::after{box-sizing:border-box;}

Note: The reset CSS should be on top of all your stylings(CSS)

Libraries that provide reset CSS

reset CSS

CDN: https://meyerweb.com/eric/tools/css/reset/

npm: https://www.npmjs.com/package/reset-css

normalize CSS

CDN: https://github.com/necolas/normalize.css/blob/master/normalize.css

post CSS

npm: https://www.npmjs.com/package/postcss-normalize

Advantages

• We can avoid resetting the default styles at n number of places.
• Debugging the styles is easy.
• Reduces the CSS file sizes.
• Reduces the CSS Obj constructions and layout painting times

It’s super important to have the reset CSS to your websites.

TIP

Have your own reset CSS by your choice of default styling and box-sizing rule to * selector.

This article is made with ❤️ for the developers and Am always thankful to the dev community here. Please do follow us to know more about the CSS tips, tricks, and concepts.