[CSS} What properties should I put in the *, html and body selector?-CodePudding

I'm a newbie in html - css and I have a question about what properties I should put in the *, html and body selector. For example, should I put font-size property in the *, html or body selector? And what if I put all the properties (photo) in just one selector - *, html or body? Thanks so much for your answers. photo

CodePudding user response：

Here is a website for reading about selectors: https://www.w3schools.com/cssref/css_selectors.asp

CodePudding user response：

The key thing to keep in mind here is specificity. You will want certain elements to be styled in a similar way, and other elements o have exceptions to the rule. An element will have the styles applied to it from the selector with the highest level of specifity, while still being a valid selector. In the event of a tie, the selector that appears first will be applied.

html { } and body { } are both equal in terms of specificity, so they are equally valid. Though note that as <html> is a parent of <body>, there is the theoretical possibility to create a selector like html > body {}, which would have higher specificity than body {}. This would largely be pointless though, as the only thing you can override would be body {}, and doing so would result in completely redundant code.

* { } is slightly different, in that there are multiple different elements that the rules could apply to. For example, you could have a default colour, with a colour specific to a particular element:

* {
  color: red;
}

div {
  color: blue;
}

<div>blue</div>
<span>red</span>

Note that only the <div> gets overridden in the above. This could be extended to make use of more complex overrides, such as wanting to have <h1>, <h2>, <h3>, and <h4> red, while overriding <h5>. setting * { color: blue; } and overriding <h5> with h5 { color: red; } would result in less code than setting each one individually.

Ultimately, depends entirely on how you want to style your application.