Difference in Applying CSS to Html, Body, and the Universal Selector *

Difference in applying CSS to html, body, and the universal selector *?

```
html {
    color: black;
    background-color: white;
}
```
This rule applies the colors to the html element. All descendants of the html element inherit its color (but not background-color), including body. The body element has no default background color, meaning it's transparent, so html's background will show through until and unless you set a background for body.
Although the background of html is painted over the entire viewport, the html element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.
```
body {
    color: black;
    background-color: white;
}
```
This rule applies the colors to the body element. All descendants of the body element inherit its color.
Similarly to how the background of html is propagated to the viewport automatically, the background of body will be propagated to html automatically, until and unless you set a background for html as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.
You can, however, combine background styles for html and body with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.
```
* {
    color: black;
    background-color: white;
}
```
This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as * has literally no significance in selector specificity.
Because this breaks the inheritance chain completely for any property that is normally inherited such as color, setting those properties in a * rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).

What is difference between '*' and 'html, body' as a selector in CSS syntax?

* selects everything, including tags, classes, ids and eveything you can think of.

html, body only selects the body and the html tags.

difference between body and * in css

The body selector has higher priority, but the * selector applies more broadly, so in <body>foo<p>bar</p></body> the body selector will determine the background of the text foo, but the * selector will determine the background of the <p> element.

Note, also that many browsers create an element around the <body> that includes its margins and scrollbars, so the * selector may also determine the color of that region.

What is the difference between html, body and * when setting global CSS Properties

* will select all elements.

html will select the <html> element.

body will select the <body> element.

The reason that sometimes they do the same thing is inheritance, meaning that child elements of the element you apply the style too will get that same style. (See the "Inherited?" column of the spec for which properties do this).

If inheritance applies, you should select body or html because * is generally slower, tho it won't make much of a difference on modern browsers.

Also, don't overuse any of these. They are very broad, and you don't want to go undoing your styles for specific elements. h1.header {color: red;} is better than

* {
    color: red;
}
h2, h3, p, ul, ol {
    color: black;
}

* {
    color: red;
}
:not(h1) {
    color: black;
}
h1.other-header {
    color: black;
}

Should we be applying CSS to body vs. html elements?

I believe that the W3C recommends that you apply any page-wide styles to the <body> element.

Difference between html and * when setting color or fonts for the whole page

The * wildcard rule essentially says this style applies to all elements. It's usually discouraged from use because that has performance implications. I suspect the author has a pet hate of elements with default margin or padding and just salts the earth because of it.

I recommend using a real CSS reset or normalising snippet instead, for example https://dev.to/hankchizljaw/a-modern-css-reset-6p3

The difference in this context between color and margin/padding is that color is inherited from an element's parent by default, and margin/padding doesn't.

So if we set * { color: green; }, we'd have to write another rule like p { color: inherit; } to get that inheritance behaviour back.

What's the difference between * and html in css selector

the *{} selects all elements and all it's children elements where html{} only selects the <html> element

See example

html {    border: solid 2px orange;}
* {    border: solid 2px green;    font-size: 1.2em;}

<ul>  <li>one</li>  <li>two</li>  <li>three  <ul>    <li>one</li>    <li>two</li>    <li>three</li>  </ul>  </li></ul>
<p>lorem ipsum</p>

CSS - Styling body element vs. styling html element

Here are two articles about this very thing:

How to center and layout pages without a wrapper

Styling HTML and body elements

Difference in Applying CSS to Html, Body, and the Universal Selector *