CSS resets are used to override the default stylesheets that modern browsers use. Because each browser uses a different stylesheet, certain elements (submit buttons, links, etc) don’t always have consistent styling across all browsers. A CSS reset will wipe out some of the browser’s default styling by replacing it with a set of completely customizable style rules for all of the basic HTML elements so that each element will appear the same, regardless of whether they’re viewed on Chrome or Firefox. There are many different CSS resets out there, each one with a different set of reset styles, but typically a reset will clear most elements of any margins and paddings, remove borders and list styles, and reverts font-size and line-height to 100%. Here’s a comprehensive list of some of the best resets available.
The Universal Reset, which selects all HTML elements using the * selector, and only has two style rules, is probably the simplest of all the CSS resets. By resetting the margin and the padding of every HTML element to 0px, the Universal Reset helps to normalize the format of a page without being too heavy. Though the use of resets is often controversial (many developers argue that it unnecessarily slows down pages because it still doesn’t eradicate the need for cross-browser testing), adding this lightweight reset to your CSS stylesheet can be a huge help in achieving cross browser consistency in your web designs.
Like any other reset, the universal reset can be customized, but be careful! The universal selector literally selects every single HTML element on the page, so adding too many rules to this method could wreak havoc on a design.
- *{
- padding: 0px;
- margin: 0px;
- }