css selectors - What does "*" mean in CSS?

Question

I have been looking at the CSS files for many websites like Facebook and Youtube.

In almost all of them I see this code:

* {
margin: 0;
padding: 0;
}

It is odd, as removing that block in chrome web developer tools doesn't affect the layout of the page.

What does this code mean, and when is it used and why?

Answer 1

This is a common technique called a CSS reset. Different browsers use different default margins, causing sites to look different by margins. The * means "all elements" (a universal selector), so we are setting all elements to have zero margins, and zero padding, thus making them look the same in all browsers.