CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 33297

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

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?

Upvotes: 4

Views: 1570

Answers (1)

bjb568
bjb568

Reputation: 11488

* 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;
}

Upvotes: 14

Related Questions