Inheritance isn't all-powerful. Many CSS properties don't pass down to descendent tags at all. For example, the border property (which lets you draw a box around an element) isn't inherited, and with good reason. If it were, then every tag inside an element with the border property would also have a border around it. For example, if you added a border to the <body> tag, then every bulleted list would also have a box around it, and each bulleted item in the list would also have a border (Figure 4-2).
Note
There's a complete list of CSS properties in Appendix A, CSS Property Reference, including details on which ones get inherited.
Here are examples of times when inheritance doesn't strictly apply:
As a general rule, properties that affect the placement of elements on the page or the margins, background colors, and borders of elements aren't inherited.
Web browsers use their own inherent styles to format various tags: Headings are big and bold, links are blue, and so on. When you define a font-size for the text on a page and apply it to the <body> tag, headings still appear larger than paragraphs, and <h1> tags are still larger than <h2> tags. It's the same when you apply a font color to the <body>; the links on the page still appear in good old-fashioned, web-browser blue.
Note
It's usually a good idea to eliminate these built-in browser styles—it'll make designing sites that work consistently among different browsers easier. In the next chapter, on Starting with a Clean Slate, you'll learn how to do that.
When styles conflict, the more specific style wins out. In other words, when you've specifically applied CSS properties to an element—like specifying the font size for an unordered list—and those properties conflict with any inherited properties—like a font-size set for the <body> tag—the browser uses the font size applied to the <ul> tag.
