CSS Tutorial Lesson 9: Inheritance

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone

[Lesson 8]<<[Contents]>>[Lesson 10]

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 descendent selectors in 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.

[Lesson 8]<<[Contents]>>[Lesson 10]

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditEmail this to someone