Reset style sheet
A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the formatting of HTML elements.
Purpose
Each browser has different default settings for styling different HTML elements, often differing from the World Wide Web Consortium recommendations for styling elements. For example, the color for link text and spacing definitions for specific items are defined differently by many browsers by default. These basic details may vary greatly from browser to browser, sometimes even varying between different versions of a browser.[1] These default styles used in combination with the author defined rules may have unforeseen effects on the appearance of the website.
With the help of a style sheet reset, these browser styles can be removed. The styles used by the developer are ideally interpreted consistently by all browsers.
History
The first style sheet resets were released around 2004,[2] and many consisted of resetting the margins and padding of all elements:
* {
padding: 0;
margin: 0;
}
However, the first reset style sheet, created in 2004 by Tantek Çelik, included additional features such as setting all font sizes to 1em and removing link underlines and borders.[3]
This process has gradually been refined by various developers, so that only some elements are reset to their basic appearance.
Notable reset style sheets
- A well-known CSS reset is part of the Yahoo User Interface Library (YUI Library).[4]
- Eric A. Meyer's CSS Reset is also very well known and sets almost every element to an unformatted state.[5]
Disadvantages
- Many CSS resets remove any formatting of an HTML element. For example, even the
strongelement, which features highlighted or bold text, often has no difference in shape and color to the rest of the text. The developer therefore has to reintroduce some removed formatting for the HTML tags he or she wishes to use in a webpage. - Depending on the size of a reset, the loading time will be longer since either the existing stylesheet file needs to be extended or additional files have to be loaded.
Difference between CSS resets and CSS frameworks
A CSS reset is a different concept from a CSS framework. A reset style sheet is only used to reset basic formatting. In contrast, a CSS framework, which typically include pre-made style definitions for often-needed UI elements or a grid system, is used to speed up the development process of a website. However, a CSS reset is often part of a CSS framework.