CSS reset - What exactly does it do?

Question

I found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it before any referenced stylesheets()?

Here is the code inside reset.css

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

Answer 1

In the beginning, there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with the most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied to your page.

If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its generally recommended to "reset" the browser's styles.

Have a look at this article Should you Reset Your CSS?

Answer 2

reset.css is used to normalize browser's default styles.

Example:

Answer 3

Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.

A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.

Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.

Answer 4

Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to „normalize“ the rendering of the page across browsers by resetting these browser-specific styes.

You have to include it before your own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)

The most popular styles reset is probably Eric Meyer's which comes along with a little background information..

Answer 5

A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible

refer http://www.cssreset.com/what-is-a-css-reset/

Answer 6

Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean] so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.

Answer 7

Every browser has its own default user agent stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.

Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

From the consistent base that you’ve set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers’ differences in their default rendering of HTML can’t touch you!

Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.

Answer 8

A CSS reset is a set of CSS rules or a stylesheet that aims to normalize the default styles and behaviors of HTML elements across different web browsers. The purpose of a CSS reset is to create a consistent starting point for styling web pages, reducing inconsistencies and differences in rendering between browsers.

Web browsers have their own default styles for HTML elements, and these styles may vary. This can lead to inconsistencies in how elements are displayed, such as variations in font sizes, margins, paddings, and other styling attributes. A CSS reset helps to eliminate or minimize these differences by providing a baseline set of styles that override the browser defaults.

CSS resets typically involve resetting or zeroing out margins, paddings, and other box model properties, as well as establishing consistent font sizes, line heights, and text alignments. By doing so, a CSS reset allows web designers and developers to build their styles on a consistent and predictable foundation.

It's important to note that CSS resets should be used with caution, as they can remove some useful default browser styles and behaviors. In recent years, alternative approaches such as CSS normalizations or using CSS frameworks that provide a consistent styling baseline have gained popularity, as they offer a more balanced approach to achieving consistency while preserving some of the browser's default styles and behaviors.

In summary, a CSS reset is a technique or stylesheet used to reset or normalize the default styles of HTML elements across different web browsers. Its purpose is to establish a consistent starting point for styling web pages and reduce inconsistencies in how elements are rendered.

Read More: https://www.janbaskdigitaldesign.com/blogs/importance-of-website-design/

Answer 9

In simple words CSS reset is required due to browsers’ inconsistency. In detail all browsers rendering are not the same. Therefore web rendering could be different from browser to browser.

Meyer Web providing a utmost CSS reset code if you're want to use/reset. You can find it here. If you need more details, here also you can find out what CSS reset in more details and why we need to use it.