We've talked about specificity and we've talked about selector "weights". Now, let's look at the relatively simple concept of the document tree and inheritance.

The Document Tree. HTML documents are built using a standard structure. At the top is the html element. Below that you have the head and body elements, and below those you have numerous other elements branching off. Those elements at the top of the tree are parent elements to those that fall beneath them (children).




Inheritance. Bearing in mind that there are exceptions to every rule, a child element will generally acquire the properties of any element it is nested within (i.e., the parent tag). This is called inheritance. For example, if you define a color in the tag, most elements inside the body of the document will inherit the color you've defined. So:


will control the appearance of the entire screen. In some browsers, the font properties defined will also apply to teletype, preformatted, and headers, which might not be what you had in mind. Naturally, you can define a specific rule for the nested element to override the parent element's formatting.

Most HTML tags have some properties already defined. For example, our old friend the tag is defined by default in HTML 4 as being bold in a very-large font and centered. When you redefine an element using CSS you don't lose any of the original attributes, unless you specifically change them. So:


will affect the tag's bold in a very-large font properties, but it will STILL be centered, because this definition doesn't mention anything like "text-align: left" or "text-align: right". As another example, you might decide to define the tag to be green and italic,


but unless you remember to change the font-weight (as in the example below), it will still be bold.


At any rate, while not a huge problem, inheritance is just one more thing you need to keep in mind when creating your CSS rules.