Most Important CSS Reset Rule

All web browsers ship with a set of default styles that are applied to every web page in the “user agent stylesheet”. Most of these user agent stylesheets are open source and you can have a look through them.

Chromium UA stylesheet for Google Chrome & Opera
Mozilla UA stylesheet for Firefox
WebKit UA stylesheet for Safari

A lot of styles are consistent across all user agent stylesheets. However some styles are inconsistent between the user agent stylesheets. For example, you can see how an input field is styled across all web browsers. It is different.

In order to deal with the inconsistencies between user agent stylesheets, we use CSS resets. A CSS reset is a set of styles applied to a page before any other custom styles. The purpose is to create a more standardised base between different web browsers.

You want to make sure that your website look the same across different web browsers. When you set the width/height of an element with border and padding, the element often appears bigger than you have set (because the element’s border and padding are added to the element’s specified width/height). The CSS box-sizing property allows us to include the padding and border in an element’s total width and height.

English Version

Urdu/Hindi Version

Related Posts