Module 10 - Page 24 - Inheritance

Inheritance

Inheritance has to do with the passing of properties from a parent object to a child object.

Example:

<html>
<head>
<title>Sample Inheritance</title>
<style type="text/css">
<!--
body { background:url(graphics/bgrdLeaves.gif); }
p { font-size:24px; color:#006600; }
//-->
</style>
</head>
<body>
<p>Here is some text with a <b>bold</b> word in it.</p>
</body>
</html>

Here is the above example displayed.

In the above example, the BODY is the parent of the P tag, and the P tag is the parent of the B tag. The B tag INHERITS the font-size and color from its parent, so that both are displayed in 24px and green. The P tag, on the other hand, does NOT inherit the background property from the parent, but, rather, is background-less and floats over the parent's background image.

Some properties are inherited from a parent object, and some properties are NOT inherited. Color and font-size, for instance, ARE inherited, while background, margin, and border (among others) are NOT inherited. For the most part, at this level of CSS use, you will not find this inheritance issue much of a concern. At some point in the future, however, you may come to a point when you have some question about inheritance or lack of inheritance of one property or another; this information is listed at the World Wide Web Consortium at http://www.w3.org/ or in Eric Meyer's book.

Main Menu