The most important CSS rule

Published on Friday, July 15th, 2005

I thought I’d share the CSS rule that’s most important to me (at least for the moment). Here goes:

*{
	margin: 0;
	padding: 0;
}

Why do I love it? Since the universal selector (*) applies to all elements in the web page, hence removing all unwanted margins and paddings and helps me getting rid of inconsistent space and rendering in different web browsers and platforms. From there on, I totally control how code will handle every aspect of space (well, almost, form elements are still hell…).

I think the first place where I saw it was Eric Meyer’s web site, but I’m not sure of who wrote it first.

So if you aren’t using it already, I really recommend trying it out!

Posted in CSS | 19 comments

19 comments

Anne
July 15th, 2005 at 13:05

Using universal selectors slows down the parser. And while you are removing default style, why not remove all of it?
Robert Nyman - author
July 15th, 2005 at 13:13

Anne,

That was an interesting aspect! Personally, I’ve never experienced any performance problems when it comes to it. Do you have any examples where it’s noticeable?

Also, when it comes to removing it all, what other default styling do you have in mind?
SilentWarrior
July 15th, 2005 at 20:34

Robert,

That is indeed very useful. I also plan to use it in future projects.

But wouldnâ€™t it also be useful to expand it even a little more, e.g. add color:#000 and background-color:#fff? Or even some other things, like default font or so.

I would also be interested in how far it slows down parsing a web site and if it is too long for the standard visitor.
guywiththebike
July 16th, 2005 at 0:37

Wow Robert, thanks a lot.

That is going to help me out immensely!
Robert Nyman - author
July 16th, 2005 at 9:40

SilentWarrior,

Absolutely, things like background-color, color and their likes can also be added through it.

When it comes to font specifically, I tend to set that on the body element and let it be inherited down through the elements.

If you look at my Find out the current Text Size setting in IE example, that’s how I usually apply the font.

When it comes to slowing down the parsing, it’s a valid question, but personally I don’t think it’s even noticeable. I know of many web developers out there that use this, and amongst these are a lot of the high-profile ones too, like Eric Meyer. So to me, it seemes like a well-tested and approved concept.

guywiththebike,

Thank you, I’m happy to hear that!
Faruk AteÅŸ
July 16th, 2005 at 12:09

Here Robert, on your request:

my initial.css file explained. A good way to start CSS based design
Robert Nyman - author
July 16th, 2005 at 12:53

Faruk,

Thank you!

SilentWarrior and others, Faruk’s post is a good example of how to attain a consistent cross-browser and cross-platform look.
Sudar
July 18th, 2005 at 6:30

Thanks Robert.

I was really breaking my head to get a consistent cross-browser look and this tip really makes it easy for me to control every aspect using code.
Robert Nyman - author
July 18th, 2005 at 8:36

Sudar,

I’m glad it helped!
Jens Wedin
July 18th, 2005 at 9:51

That is my favorite CSS too

Eric has some more stuff that he is “undoing” in his article, but I mostly do not use that other stuff.

http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
Robert Nyman - author
July 18th, 2005 at 10:07

Jens,

It’s the best one, in my opinion!
Thanks for the link to Eric’s article.
Jim Cook
December 3rd, 2005 at 1:13

I know I’m late to this party (by months) but I have to say implementing this rule has resolved a world of issues. I’m now staring at a layout that works in both Firefox and IE: styled menu lists, h1s, paragraphs, the works. Aaahhhhh!

My only frustration is that I didn’t catch on to this earlier. It’s not mentioned in the handful of CSS / Web Standards books that I have. It should be, and in bold face sized extra large too.

Thanks Robert. I’m emailing Santa of your good deeds right now.
Robert Nyman - author
December 3rd, 2005 at 11:56

Jim,

Ha ha!
Thank you!

I’m glad it helped you, although nowadays I normally use something more like Faruk’s CSS, just because of the talk of slowing web browser performance.
Jim Cook
December 4th, 2005 at 6:05

Didn’t experience that at all. I’ve heard (or read) it suggested and watched for it in my tests. It must be a nanosecond lag. Nor have I seen actual measures reported, just the suspicions.

I’ve also read about the * rule interrupting the natural behavior of some form elements. I specifically dropped in all the inputs, selects and submits I could think of with no negative effects. I’d like to see an example somewhere.
Robert Nyman - author
December 4th, 2005 at 11:25

Jim,

When it comes to losing performance, I have no example. However, I’d love to see one, if it affects slow computers etc.

I haven’t regarded the form issue as a showstopper, either. Nevertheless, it’s not that a big deal to specify the tag names specifically, so I do it nowadays just to be on the safe side.
Rahul Dev Katarey
November 26th, 2006 at 9:28

Hi

its a very useful tip Thanks!

Rahul Dev
http://www.katarey.com
Robert Nyman - author
November 27th, 2006 at 14:15

Rahul,

I’m glad it helped.
Saeid Zebardast
January 13th, 2007 at 21:56

Wow
Tanks!
I translate this post to persian.
This post in persian (Farsi)
Robert Nyman - author
January 15th, 2007 at 9:09

Saeid,

Nice, thank you!

All the proceeds from ad clicks will go to charity. However, if you like to give something directly to charity yourself, I recommend choosing from the listed ones below.