Inheritance

Just like the money you hope you'll get from rich Uncle Dick, inheritance in CSS involves passing something down from ancestors to descendants. But, rather than the mountain of green drinking vouchers you hope to get upon the sad, but strangely longed-for, demise of generous old Dickie, in the case of CSS, what is inherited is the values of various CSS properties.

You may remember from our discussion on the document hierarchy in Chapter 1 that the body tag is the great-ancestor of them allall CSS-targeted tags in your markup descend from it. So, thanks to the power of CSS inheritance, if you style the body tag like this

then the text of every text element in your entire document inherits these styles and displays in blue Verdana (or in one of the other choices if Verdana is not available), no matter how far down the hierarchy it is. The efficiency is obvious; rather than specify the desired font for every tag, you set it once in this way as the primary font for the entire site. Then you only need font-family properties for tags that need to be in a different font.

Inheritance
For now, simply remember that styles that relate to text and its color are inherited by the descendant elements. Styles that relate to the appearance of boxes created by styling divs, paragraphs, and other elements, such as borders, padding, margins, and background colors, are not inherited.

Many CSS properties are inherited in this way, most notably text attributes. However, many CSS properties are not inherited because inheritance doesn't make sense for them. These properties primarily relate to the positioning and display of box elements, such as borders, margins, and padding. For example, imagine you want to create a sidebar with text in it. You might do this by writing a div (which you can think of as a rectangular box), which has several paragraphs inside it, and styling the div with a border, say a 2-pixel red line. However, it makes no sense for every one of those paragraphs within the div to automatically get a border too. And they won'tborder properties are not inherited. When we look at the box model in Chapter 4, we'll look at inheritance in greater detail.

Also, you must be careful when working with relative sizes such as percentages and ems; if you style a tag's text to be 80 percent and it's descended from a tag whose text is also sized at 80 percent, your text will be 64 percent (80 percent of 80 percent), which is probably not the effect you want. In Chapter 3, I discuss the pros and cons of absolute and relative text sizing.