Reset CSS

Associate
Joined
13 Jan 2007
Posts
2,424
Location
Belfast,Northern Ireland
I've seen this mentioned as good practice so was going to implement it myself and was directed to the link below:

My question, do you simple have this at the top of your main css file, then add to it? I thought it would look pretty poor if I was to have three seperate declarations for the body?

http://meyerweb.com/eric/tools/css/reset/

Or this if you're lazy

Code:
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
Keep it at the top, or as a separate file but linked before your own styles.

The idea is to give the elements those styles to move them (or look the same) into a unified position across browsers and then you move them again with your own styles.

Don't add to it, just leave it at the top. :)
 
I have it as a separate file, the first css file I call. I always use the same CSS reset so like to have it separate from my editable CSS.
 
Personally, I only link one css file (unless it's a very large site I'm doing), and then inside my style.css, I just import any others, such as my reset.

@import "reset.css";
 
Thanks very much for the input guys, its pretty much what I expected. When I said add to it, I essentially meant putting it at the top of my current css file then having my changes below it. I thought it may be considered poor to have it at the top referencing the body twice, then a third reference by myself.

Seems the best route is to import or link which I'll implement for my site, thanks all
 
Back
Top Bottom