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;
}

In CSS there are some default styles applied to every web page in addition to your styles. These default styles define certain padding and margin values for elements like <h1>, <li>, <p>, <table>, etc. The annoying thing is that often you need to override these styles to get your page to look correctly, but not all browser manufacturers agree on the defaults. Often most developers find it easiest to reset all padding and margins to zero so everything behaves as expected. * is the wildcard selector and will match all element types. Essentially that style says to reset all padding/margins to zero for all elements hence removing any default stylings.

This is a common part of a general css reset. This basically sets all margin and padding of all (*) elements to 0. You are then free to add your own margin and padding values to each element as per your requirements.

* is a wild card, it selects all elements margin: 0; and padding: 0; set the margin and padding to 0 for the elements selected, which in this case would be all elements.

This is very handy for web development, I use it in every site I build.