O'Reilly logo

HTML, XHTML, and CSS Bible, Fifth Edition by Steven M. Schafer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 28. CSS Inheritance and Cascade

IN THIS CHAPTER

  • Inheritance

  • Cascade

  • Specificity

The words "inheritance" and "cascade" are bandied about a lot in regard to CSS. They are often used interchangeably. However, they each have a unique style-related meaning. This chapter clarifies these terms and their meanings in CSS.

Inheritance

The word "inheritance" is defined by Webster's Dictionary as "a) the act of inheriting property; b) the reception of genetic qualities by transmission from parent to offspring; c) the acquisition of a possession, condition, or trait from past generations." This definition is accurate for the behavior of HTML elements controlled by CSS—child elements inherit the properties of their parents.

For example, consider the following document, whose output is shown in Figure 28.1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
   <title>Inheritance Example</title>
   <style type="text/css">
     table { background-color: red; }
   </style>
 </head>
 <body>
 <table border="1">
   <tr>
<th>Column One</th>
     <th>Column Two</th>
   </tr>
   <tr>
     <td>Cell One</td>
     <td>Cell Two</td>
   </tr>
 </table>
 </body>
 </html>
The table rows and cells inherit the table's background-color property.

Figure 28.1. The table rows and cells inherit the table's background-color property.

The table's background-color definition applies to all table elements (table), all table row elements (tr), and all table cell elements (th and td) in the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required