Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference in applying CSS to html, body, and the universal selector *?

How are these three rules different when applied to the same HTML document?

html {     color: black;     background-color: white; }  body {     color: black;     background-color: white; }  * {     color: black;     background-color: white; } 
like image 493
sid_com Avatar asked Aug 25 '11 08:08

sid_com


People also ask

What is the difference between * and body in CSS?

body is an element selector (selects an element body ) while * is a universal selector (selects all elements).

What is the difference between HTML and body in CSS?

As per HTML rule ,The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Generally data are visible to user or reader. The html tag tells the browser that this is an HTML document. The html tag represents the root of an HTML document.

What is the difference between * and body selector?

body is an element selector (selects an element body) while * is a universal selector (selects all elements).

What is the difference in selectors in CSS?

and hash(#) both of them are used as a CSS selector. Both selectors are used to select the content to set the style. CSS selectors select HTML elements according to its id, class, type, attribute, etc. Id selector(“#”): The id selector selects the id attribute of an HTML element to select a specific element.


1 Answers

  1. html {     color: black;     background-color: white; } 

    This rule applies the colors to the html element. All descendants of the html element inherit its color (but not background-color), including body. The body element has no default background color, meaning it's transparent, so html's background will show through until and unless you set a background for body.

    Although the background of html is painted over the entire viewport, the html element itself does not span the entire height of the viewport automatically; the background is simply propagated to the viewport. See this answer for details.

  2. body {     color: black;     background-color: white; } 

    This rule applies the colors to the body element. All descendants of the body element inherit its color.

    Similarly to how the background of html is propagated to the viewport automatically, the background of body will be propagated to html automatically, until and unless you set a background for html as well. See this answer for an explanation. Because of this, if you only need one background (in usual circumstances), whether you use the first rule or the second rule won't make any real difference.

    You can, however, combine background styles for html and body with other tricks to get some nifty background effects, like I've done here. See the above linked answer for how.

  3. * {     color: black;     background-color: white; } 

    This rule applies the colors to every element, so neither of the two properties is implicitly inherited. But you can easily override this rule with anything else, including either of the above two rules, as * has literally no significance in selector specificity.

    Because this breaks the inheritance chain completely for any property that is normally inherited such as color, setting those properties in a * rule is considered bad practice unless you have a very good reason to break inheritance this way (most use cases that involve breaking inheritance require you to do it for just one element, not all of them).

like image 81
BoltClock Avatar answered Sep 21 '22 02:09

BoltClock