Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

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?

like image 257
confile Avatar asked Dec 09 '22 10:12

confile


1 Answers

* 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;
}
like image 176
bjb568 Avatar answered May 06 '23 03:05

bjb568