Inheritance¶
You can think of a web page and its elements as a set of nested boxes. The outermost box is the web browser itself. Inside the web browser "box" is the html "box," and inside that is the body "box". All of the elements you see on the web page are nested inside that body box.
Note: You learned about the basic elements of a web page - including <html> and <body> in the Basic Page Structure section, but if you have forgotten it, now would be a good time for a quick review.
Inheritance is a critical concept in CSS. It means that unless a more specific value is assigned to a style property for a page element, the property will "inherit" the value of its most immediate parent.
An example might be easier to understand. If you have a web page that contains the following HTML code:
<div class="book_review">
<p class="intro">This book was very interesting.</p>
<p class="review_body">The character development was really intriguing. I loved the way you never quite knew what any of them
were about to do, because their personalities were constantly evolving and changing.</p>
</div>and your style sheet includes these styles:
div.book_review {
background-color: blue;
color: white;
}
p.review_body {
background-color: white;
color: black;
}then your first paragraph (intro) will inherit the blue background and white font of its parent div (book_review). The second paragraph (review_body), having a more specific style assigned, will have a white background and black font.
Note: If your style sheet has a generic
pstyle, then your paragraphs will inherit those property style assignments over its parent's.
Which Styles Inherit and When?¶
Not all style properties automatically inherit the styles of their parent, but you can assign the value inherit to a style property to force this behavior. There is a great tutorial about using the inherit value in your style sheets this is useful for mastering this technique.
Aside from using the inherit property value, it's important to understand which styles inherit and under what conditions. Rather than reduplicating that information here, go read this explanation of CSS inheritance.
Tools for Development¶
If you work in web development and use Firefox as your web browser, then I highly recommend you download and use the Firebug web development plugin. Not only can this utility help you figure out which styles are being applied to your page elements, it can give you a myriad of other information about what is being rendered to your web browser. A full treatment of Firebug is outside the scope of this project, but you can find a great deal of documentation about it on the Firebug web site.
The Safari web browser also comes with Web Inspector which is very similar to Firebug. To view the web inspector, enable the developer menu in Safari by selecting Show Develop Menu in the Menu Bar from the Advanced tab of Safari Preferences.