Menu
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?
257
* 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
