Inheritance, Contextual Selectors

line.gif

Inheritance

When nesting HTML tags, the inner tag inherits the properties of the enclosing tag. For example, consider the following code.

<p style=color:red>This is some <big>big</big> red text.

The above code is rendered as shown below:

This is some big red text.

from which it is clear that the big text is also red (i.e. inherits the property of being red). Using inheritance, properties may be expressed relative to the parent. For example, if a style sheet contained:

p {font-size: 16pt}
p {line-height: 120%}

then paragraph text would be 16 points, but with line height as for 19.2 point text. Such a paragraph is shown below.

This text is 16 points but with line height 120%;
and this is another line of such text.

Contextual Selectors

Using inheritance, selectors can be applied contextually. For example, if it is a requirement that:

then the following selectors may be used.

h1 {color: red}
h1 b, h1 i {color: green}

Alternatively, the same effect may be achieved as follows.

h1 {color: red}
h1 b {color: green}
h1 i {color: green}

Exercise 21

Write a HTML document that:

Solution

Take this link to see the solution of the exercise. You should view the source of the solution and compare it to that which you provided. You should add the solution of this exercise to the samples panel that you created in exercise 6.

The next section next.gif introduces CSS classes, which define properties in an abstract manner.