How are these three rules different when applied to the same HTML document?
html {
color: black;
background-color: white;
}
body {
color: black;
background-color: white;
}
* {
color: black;
background-color: white;
}
Difference in applying CSS to html, body, and the universal selector *?
Asked Answered
html { color: black; background-color: white; }This rule applies the colors to the
htmlelement. All descendants of thehtmlelement inherit itscolor(but notbackground-color), includingbody. Thebodyelement has no default background color, meaning it's transparent, sohtml's background will show through until and unless you set a background forbody.Although the background of
htmlis painted over the entire viewport, thehtmlelement 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
bodyelement. All descendants of thebodyelement inherit itscolor.Similarly to how the background of
htmlis propagated to the viewport automatically, the background ofbodywill be propagated tohtmlautomatically, until and unless you set a background forhtmlas 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
htmlandbodywith 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).
Note that by default, the
body also usually has a small margin, which html does not. –
Separator Which type of element is <body>? Block Level Or inline? –
Resupinate
@SteveJorgensen, it's actually a small padding; otherwise, the background wouldn't expand to the whole page. –
Jeanejeanelle
@zneak: Actually, it is a margin. The
body element doesn't really "expand" to cover the whole page; rather, the html element uses the body element's background if its own background color is computed as transparent and/or its background image is computed as none. This is described in the spec. This means if you take a default page and set different backgrounds for html and body, you'll notice that the body is in fact being offset by a margin rather than padding its content. –
Steiger @zneak: You can also apply a background and a border to
body alone to see the margin: jsfiddle.net/BoltClock/vddbh –
Steiger © 2022 - 2024 — McMap. All rights reserved.
*(which is "trivial"): #4566442 – Schoolmistress