The elements in a document form a tree-like hierarchy with the root element at the top and the rest of the document structure spreading out below it (which makes it look more like a tree root system, really). In an HTML document, the
html element is at the top of the tree, with the
body elements descending from it. The rest of the document structure descends from those elements. In such a structure, elements lower down in the tree are descendants of the ancestors, which are higher in the tree.
CSS uses the document tree for the mechanism of inheritance, in which a style applied to an element is inherited by its descendants. For example, if the
body element is set to have a
red, that value propagates down the document tree to the elements that descend from the
body element. Inheritance is interrupted only by a style rule that applies directly to an element. Inherited values have no specificity at all (which is not the same as having zero specificity).
Note that some elements are not inherited. A property will always define whether it is inherited. Some examples of noninherited properties are