Inheritence

Inheritance is transfer of formatting rules, which are located in the others. Such elements are called child, and they inherit some style features of the parents in which they are located.
Let’s examine inheritance on the example of a table. The strict hierarchical structure of tags is a feature of tables. The package <table>, the tags <TR> are put into, is the first, than tag <TD> goes. The colour for cells’ content is defined automatically, if You determine the colour of the text in selector styles (example 15.1).

Example 15.1. Inheritance of colour parameters.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Наследование</title>
  <style type="text/css">
   TABLE {
    color: red; /* Colour of the text*/
    background: #333; /* Background of the table */
    border: 2px solid red; /* Red phrame around the table */
   }
  </style>
 </head>
 <body>
  <table cellpadding="4" cellspacing="0">
   <tr>
    <td>Cell 1</td><td>Cell 2</td>
   </tr>
   <tr>
    <td>Cell 3</td><td>Cell 4</td>
   </tr>
  </table>
 </body>
</html>

Red colour of the text is defined for the whole table in this example, that is why it is used in cells, because tag <TD> inherits the features of the tag <TABLE>. But not all style attributes are inherited. Parameter border determine the border around the table, but not around the cells. The value of background parameter is not inherited. The matter is transparent is used as a value in background attribute.

In order to define whether value of the style is inherited or not, You should consult to CSS features manual.
Inheritence allows value determination of some parameters once by defining their parents of top level.

Example 15.2. Text parameters for the whole page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Inheritence</title>
  <style type="text/css">
   BODY {
    font-family: Arial, Helvetica, sans-serif; /* Type family */
    color: navy; /* Blue colour of the text */
   }
  </style>
 </head>
 <body>
  <p>Blue colour of the text of this paragraph.</p>
 </body>
</html>

In the given example the sans serif and the color of the passage text is set with the help of the selector BODY. Thanks to the inheritance there is already no need for the color-setting separately for every element of the document. In this case it is necessary to redefine the parameters needed evidently, as it is shown in the example 15.3.

Example 15.3. Changing the features of inherited element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Inheritence</title>
  <style type="text/css">
   BODY {
    font-family: Arial, Helvetica, sans-serif; /* Type family */
    color: navy; /* Blue colour of the text */
   }
   P.red {
    color: maroon; /* Dark-red color of the text */
   }
  </style>
 </head>
 <body>
  <p>Blue colour of the text of this paragraph.</p>
  <p class="red">And this passage has a different text color.</p>
 </body>
</html>

In this example colour of the first paragraph is inherited from body selector and in the second example it was evidently set through the class with the name red.