How Do `html`, `body`, and the Universal Selector Differ in Styling HTML Elements?

Inspecting the Distinction in Styling HTML Elements with html, body, and the Universal Selector

Delving into CSS selectors, one may encounter discrepancies in their behavior when applied to the same HTML document. To explore these differences, let's examine the following scenarios:

1. html Selector:

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

This selector sets styles for the outermost html element. Inheriting its color property, all its descendants inherit black text, including the body element. However, the background-color property is not inherited, so the body element's default transparent background remains visible unless explicitly set otherwise. Notably, the html element's background color fills the viewport even though it does not extend its full height.

2. body Selector:

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

Applying styles to the body element directly influences all its descendants. Like before, all elements inherit the color property. In addition, the body element's background color is propagated to the html element until a background is defined for html. Consequently, whether the first or second rule is used for background styling makes little practical difference in most cases.

3. Universal Selector (*):

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

The universal selector affects every element, breaking the inheritance chain for both color and background color. This rule can be overridden by more specific selectors. While its use can be valuable for certain scenarios, breaking inheritance via the universal selector is generally discouraged unless absolutely necessary.

The above is the detailed content of How Do `html`, `body`, and the Universal Selector Differ in Styling HTML Elements?. For more information, please follow other related articles on the PHP Chinese website!