Document Hierarchy
Please read pages 25 - 27 from the Stylin' textbook. This document covers the concepts on those pages and emphasizes the terminology. This material will be covered in more depth in future weeks.
On page 25 the text has this snippet of code, which has the elements listed. The actual content has been removed and you see only the elements with the document hierarchy:
<body>
<div id="logo">
<img />
<h3> </h3>
</div>
</body>
The author has this image of the relationship between the different elements in the document:
Terminology - Parent
In terms of an object oriented environment, the parent is the element directly above the current element.
The parent of the DIV element is the BODY element. If the BODY element is styled, then then the DIV (and any elements nested within) inherit the properties of the parent. If the body element is styled to display text in the "Verdana" font-family, then all text in the body, and any element contained within, will be displayed in the Verdana font-family - the entire document displays in the Verdana font-family.
The parent of the IMG and H3 tags is the DIV element directly above it. If the DIV is not-styled, then these children (the IMG and H3) inherit the characteristics/properties of the parent (body) - text will display in the Verdana font-family.
If the DIV element is styled to display a different font such as "Arial", then all elements within the block-level DIV element will inherit the properties of the parent - the H3 tag will display in the Arial font-family. This overrides the BODY style because the children (H3) inherit the properties of the parent.
Text elsewhere in the document displays as "Verdana" but the text inside the DIV element displays as Arial. The parent of the H3 element inherits the characteristics/properties of the parent whose font-family is set to "Arial". Other elements below, which are not inside this DIV element inherit the properties of its parent - the BODY element and will display in the "Verdana" font-family.