CSS - What is the meaning of * rules here

Question

Hello all,

I see the following rules on a webpage:

* {

    margin: 0px;
    padding: 0px;
    border: 0px;
}

Based on my knowledge, the webpage wants the IE browser to reset the margin/padding/border as 0 to avoid some potential problems.

If this rule is useful, why I don't see this rule shown on popular website, such as yahoo, google?

Thank you

Answer 1

* rules match EVERYTHING, but it is not recommended to use them.

The author's intention might have been to do a CSS Reset to remove browser's default CSS rules, but that's not the good way. Try this one

Answer 2

That is known as the universal selector. In your case, those rules will be applied to every element on the page.

The most popular use of such a rule is to normalize differences in browser defaults for margin and padding.

Answer 3

This is an older version of a CSS reset. It will set every element to 0 margin, border and padding to standardize display characteristics across browsers.

Each browser includes it's own default stylesheet, which can cause differences in positioning of elements in different browsers if you have not explicitly specified these attributes for an element.

The universal selector is fairly slow, and it's better to use specific rules targeting certain elements. A more modern way is a stylesheet like this, Eric Meyer's CSS reset. Lots of people use this one as it's complete and relatively efficient. Personally, I remove elements I know I'll never use (acronym, abbr, etc).