What is a reset in CSS?

[RB!]

What is a reset in CSS?

[RyanReese]

It is a way to reset margins and paddings on a webpage to 0, and ignore the browser default.

The NORMAL universal reset is

*{margin:0;padding:0;} and must be placed at the top of your stylesheet so it can cascade down.

Eric Meyer has compiled a better reset though.

[RB!]

Why would you need this?

[kohoutek]

Browsers have their own default stylesheets. Reset rules set by the CSS author of a page override the browser's default stylesheet. It isn't needed but can come in useful if you would like to reduce the amount of inconsistencies brought forward by the default settings of browser xy. An example is Eric Meyer's CSS Reset.

[Centauri]

Why would you need this?

Different browsers apply different amounts of margins and/or padding to various elements by default, and relying on these gives rendering inconsistencies - a reset brings things back to a level playing field cross browser.

[Dan Schulz]

Why would you need this?

This post will explain it, and so much more... http://www.sitepoint.com/forums/show...78#post3935978

[kirie]

to make it simple every browser has his own default style, css reset is used to make ALL browser have your own default style.

without it your website will morelikely get messed up in, since every browser have his own style apply

[Stomme poes]

I like to use my own reset, but if you look carefully at the Eric Meyer one listed above, you'll see some things just aren't right.

Deprecated elements are listed-- why would you ever have those on your page? (applet???? seriously even commenting visitors are not going to introduce that garbage into your code) and elements nobody even remembers how to use anymore are listed (like tt). Padding is zeroed on inline elements who don't even get padding. Table elements are getting their backgrounds set to "transparent".... I don't remember ever making a table and being unexpectedly presented with some unwanted background colour. What the?

If you DO use a reset, don't have some "reserve" reset sitting around somewhere prepared to do battle with any and every page in existence. That's called BLOAT and bloat is never necessary (did I just repeat myself?). There's no point, and even worse is doing it the Yahoo way (a separate stylesheet JUST for the reset!!).

Do your visitors a favour: yes, they will only load your CSS sheet once because browsers cache. But why make them load more than necessary? Why make them do more than the minimum number of GET requests than absolutely necessary? Set your reset at the beginning of your SINLGE stylesheet, and only mention the elements you're even bothering to use on your site.

Some day, I'll use ins and del. Someday, somewhere, but until then, I will not have CSS for them in my css sheet. IF I ever DO have those elements, they will be styled as Meyer and some others here have them (the strike-through for del etc). But listing elements who don't exist on your page is talking to yourself.

Like old men in the park with their paper bags. It's okay, they're not hurting anyone by talking to themselves. It's just weird.

[RyanReese]

I like Eric Meyers: my sites use some forms and to lose that depressed look on inputs when you click them is just too big to lose. Accessibility wise Eric Meyers is much beter.

[kirie]

@stomme
yup it was Accessibility, create seperate file will make nice and clean code, and why would you bother with only one more request. the user dont care about the way your websitework.

they dont say hey this website make my browser request one more css, make the loading 1 second slower......

rather than that if you sell your template other develpment, they want something clean and easy to change, that is why I prefer creating 2 css

[AutisticCuckoo]

The NORMAL universal reset is

*{margin:0;padding:0;} and must be placed at the top of your stylesheet so it can cascade down.

Unlikely, since that selector has a specificity of 0,0,0,0 and will be overridden by any other selector. You can put it wherever you like, although I agree that it would be a good idea to place it first.

[RyanReese]

I mean it doesn't HAVE to be at the top but I put it at the top because I put everything in markup way..(explained bad).

AKA global styles first, then I put header CSS below that and go all the way down. If you just speghetti the CSS..well.

[Stomme poes]

create seperate file will make nice and clean code,

Waste of files. Seriously not worth a separate stylesheet. You ever see people trying to find out why something isn't working after making a change, that's someone with multiple stylesheets all conflicting with each other and nobody knows which hand is doing what.

[RyanReese]

I personally hate trying to debug sites with multiple stylesheets. I have to guess by the file name to determine which one to look at first. I don't see a reason for seperate stylesheets unless it's for print media or screen, etc.

[Stomme poes]

Yeah, if I'm debugging someone else's site (usually a template and yes, I understand why they do the multiple sheets thing but I think ultimately it makes MORE work, not less, unless different pages are calling different types of styles) I use the Web Dev Toolbar to View CSS which gathers all the sheets together and I can do a ctrl+f to find things.

That's prolly why I like one super long stylesheet than a couple of smaller ones-- easier searching, and I can gather all my styles for something (like a form) so they're all together. Any anchors in my form, I don't want their styling over on the anchor-styling page, I want it with the form styles. My reset is a few (not many) globals listed near the top, where they're all together and easily found and changed if needed.

kirie I want to apologise if I sounded crabby. I appreciate your viewpoint : )

[omnicity]

I like to use my own reset, but if you look carefully at the Eric Meyer one listed above, you'll see some things just aren't right.

I know that some people go to the extreme of having the reset as a seperate stylesheet, but to my mind, the most sensible way to use them is as your starting point - instead of a blank page.
Part of your final clean up before releasing a page is to tidy up unused stuff, whether it is CSS, extra DIV's or whatever.

(The dustMeSelectors extension for FireFox is quite a useful tool at this stage.)

[cooper.semantics]

Be careful of just using a css reset if you do not know exactly what is going on beneath the seams.

Eric Meyer reset is a good start. One thing that is drawn to my attention is this declaration:

vertical-align: baseline;

Drop this from the css ruleset as it will cause issues down the line with tabular data.

[Stomme poes]

^ yeah, and usually you the developer want vertical-align: middle. So you'll override it just about every time. And if you're always overriding it, it shouldn't be a global cause it isn't saving you the time it's meant to.

The whole purpose of the resets was lazy people didn't want to keep writing

element {
margin: 0;
padding: 0;
}

all the time. So someone thought, hey, I can just make all of them zero in one declaration! Yay!
And the few (the minority) who DO need margins or padding, you added in.

If you were already stating the margins and padding of every element anyway, the reset doesn't save you any time and takes up some lines in your code.

I knew someone who always wanted about a half em of space around every major page element, and was tired of writing it out. So he made his own reset:

body>* {
margin: .5em;
padding: 1px;
}

the only direct children of the body in his case were the main wrapping elements: header, sidebars, navbar, main content and footer. Nothing inside them got the rule though.

It saved him time and code, so it was worth it for him.

[RyanReese]

What happened to the IE6 users (in that example)? .

[Blake Tallos]

^ yeah, and usually you the developer want vertical-align: middle. So you'll override it just about every time. And if you're always overriding it, it shouldn't be a global cause it isn't saving you the time it's meant to.

The whole purpose of the resets was lazy people didn't want to keep writing

element {
margin: 0;
padding: 0;
}

all the time. So someone thought, hey, I can just make all of them zero in one declaration! Yay!
And the few (the minority) who DO need margins or padding, you added in.

If you were already stating the margins and padding of every element anyway, the reset doesn't save you any time and takes up some lines in your code.

I knew someone who always wanted about a half em of space around every major page element, and was tired of writing it out. So he made his own reset:

body>* {
margin: .5em;
padding: 1px;
}

the only direct children of the body in his case were the main wrapping elements: header, sidebars, navbar, main content and footer. Nothing inside them got the rule though.

It saved him time and code, so it was worth it for him.

Woah, thats pretty neat and this works?

[RyanReese]

Yes, considering it will select everythinig that is a child of the body.

But I was (in the above post) wondering what would he do for IE6 users .

[Blake Tallos]

Yes, considering it will select everythinig that is a child of the body.

But I was (in the above post) wondering what would he do for IE6 users .

This is pretty neat stuff. I think it's going to be a deff time saver. When having to do margin//padding to my elements. Now I dont even have mess with the padding at all. Theres up's and then theres downs to using this "technique". I'm sure you know what they are Ryan.

[RyanReese]

I'm not trying to poke fun at his code: I legiminately want to know how the coder compensated for IE6. I have several ways to do this in my head but none of them are good for large scale sites. I have one that is good but I want to see how he did it.

[Dan Schulz]

Her code, not his.

[gary.turner]

There must be something in the water. This is at least the third time this question has arisen in various forums over the last few weeks.

People who know me know that I think the idea of a general reset to zero, or some baseline, as one debater called it, is asinine. Here is a summary of my argument:

People have been "resetting" default values for quite a while to some degree or another. It was Meyer and his articles,
here,
here,
here,
and finally
here,
who served as the primary "name" source for the methodology.

Read the articles. You will find them full of unnecessary style rules; essentially make-work for yourself. Let's look at his final version of reset:

/* v1.0 | 20080212 */

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

Let's dissect this first ruleset and selectors.

I'll grant you html and body usually have margin and padding zeroed.

What are applet and center even doing here? They're deprecated and should not be used.

"a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, div and span": What differences are you dealing with here? None of these have default padding or margin.

"dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td": For these that have or require margins, you need to set them to the required values; not to zero, then to another value. Font sizes are inherited, so no need to restate as 100%. (Yeah, I know about IE and tables, but in standards mode, tables do inherit.)

For inline boxes, baseline is the default, with a couple of exceptions I'll mention next. Table cells default to middle, and that or top is more commonly the desired alignment. So set it. Don't make it baseline, then have to redefine vertical alignment. What about sub and sup? They certainly don't default to baseline, nor will that be where you want them. Why screw around?

Font sizes and vertical margins for "h1, h2, h3, h4, h5, h6, p, blockquote, pre", etc. are likely not what you want by default. So set them. If you care enough about typography to not like the defaults, you will have worked out the scale you prefer, and will have computed the appropriate font-size, leading (line-height), and top and bottom margins to fit that scale. So set them.

body {
	line-height: 1;
}

This is just silly. Why make the text difficult to read. See the comments above about typographic scale.

ol, ul {
	list-style: none;
}

Huh? If you don't like what the browser wants to give you, specify what you do want. Even if you do specify, it doesn't mean a disc will look the same x-browser and x-platform, or even x-user.

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

This is just wrong. It's dumbing down the markup to compensate for one braindead browser, IE<8. See Quotations in the html document.

/* remember to define focus styles! */
:focus {
	outline: 0;
}

Since this is an important accessibility feature, why kill it, only to turn around and resurrect it?

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

Well, duh!

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

If that's what you want, fine. If not, why take an intermediary step?

As one who closely controls typographic rhythm and scale when I can, I set specific size, leading (line-height), and margin values for nearly all text related elements. I can find no sane reason to set some intermediate boilerplate value on the way to setting my own.

One source of pro reset arguments even confuses IE's layout/margin-collapse bug with css defaults. Meyer's apologia simply makes no sense.

Compiled from comments I made at CSSCreator.

cheers,

gary