Lesson 9: Inheritance

❮ Previous Lesson Next Lesson ❯

To save time from having to design CSS styles for each and every element, we can use the inherit property to apply the styles from the parent element to the child elements. Child elements are elements contained inside an element which is called the parent element.

For example,

<div> <p> I am the child element  of div and <b>I am the child element of p and  also a child element of div</b></p></div>.

In the above example, p is the child element of div and b is the child element of both p and div. Let's examine the following example:

Example 9.1

<!Doctype html>
<html>
<head>
<title> Inheritancein CSS</title>
<style type="text/css">
body{font-family:Arial;font-weight:bold;}
.section{font-family:inherit;font-weight:inherit;}
</style>
</head>
<body>
<div style="font-family:verdana;background-color:yellow;border:1 px solid black;font-weight:normal;">
<p style="inherit;">
We have learned about child and descendent selectors in previous lesson. </p>
</div>
<div class="section"><p>In this lesson, we shall learn about
inheritance in CSS</p>
</div>
</body>
</html>

The Output

We have learned about child and descendant selectors in the previous lesson.

In this lesson, we shall learn about inheritance in CSS

* Notice that the first p element inherits the CSS styles of the div element and the second p element inherits CSS styles from the body element.

❮ Previous Lesson Next Lesson ❯