Chapter 3
}
#home h1 {
font-size: 34px;
}
The Document Tree
You can visualize the structure of an HTML document as a tree with elements for branches. If it helps you
picture it, invert the tree so it begins with the root element at the top and all other elements descending
downward, making it more like a family tree than the leafy, wooden sort. Because of this similarity,
developers use genealogy terms to refer to the relationships between elements. Figure 3-2 shows the
family tree of a simple document.
Figure 3-2. A simple document tree
In the diagram, the tree begins with the root html element, which has two child elements: the head and the
body. That body element has two children of its own: a level-one heading (the h1 element, covered in
Chapter 4) and a p element for a single paragraph (also covered in Chapter 4). Those two elements are
siblings of each other, sharing the body element as their common parent. They’re also descendants of the
html element, which is their ancestor. The paragraph in turn contains an em element and an a element,
sibling children of their parent paragraph, descended from the ancestral body and html elements.
We’ll use these terms—parents, children, siblings, descendants, and ancestors—often in this book when
we discuss the structure of an HTML document and the relationships between elements.
Connecting CSS
The HTML document contains all of the content that a browser will display. Every web browser in turn has
its own built-in CSS rules for how the HTML elements should be rendered, including rules for which fonts
to use and what sizes, what colors the page background, links, and regular text should be, and how much
