HTML and CSS Reference
In-Depth Information
}
#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 topic 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