I can set global CSS properties in one of the following blocks:
* {
}
html {
}
body {
}
What is the difference between them? How does each setting affect the page style?
When I set font-family
or color
, where do I have to place it?
*
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;
}
or
* {
color: red;
}
:not(h1) {
color: black;
}
h1.other-header {
color: black;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With