O'Reilly logo

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

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