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?