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 ...

Get HTML, XHTML, and CSS Bible, Fifth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.