Chapter 28. CSS Inheritance and Cascade

IN THIS CHAPTER

  • Inheritance

  • Cascade

  • Specificity

The words "inheritance" and "cascade" are bandied about a lot in regards to CSS. The words are often used interchangeably. However, they each have a unique style-related meaning. The next two sections attempt to clarify 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 properties of their parents.

For example, consider the following document and its output 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'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 document.

The rows and cells are also colored red because they are child elements of the table and inherit the table's background color property. The main ...

Get HTML, XHTML, and CSS Bible, Fourth 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.

Start your free trial