What does "*" mean in CSS?

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?

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.

Asterisk (*) is a wildcard and means all elements.

* {
    margin: 0;
}

sets the margin of all elements to 0.

* is a wildcard

It means apply those styles to all elements.

In this instance its setting the margin and padding on all elements to 0. This is common with Reset CSS files in order to default all native browser margin/padding on different elements to a common value.

It resets the margin and padding of all HTML elements on the page to 0.

Some browsers may already do this by default, but it's always useful to try to reset everything manually, just in case.

In fact, many websites carry a reset.css (or similar) which when opened, you'll notice many rules to reset everything across every browser.

It's a wildcard and sets margin and padding to 0 for all HTML elements.

Try a more interesting one like:

* {
    font-size: 20pt;
}