Style InheritanceS2C Home « Style Inheritance

So you may be asking, what is style inheritance? Well, style inheritance is where CSS properties applied via a style to a tag, are also applied to tags nested within that tag. Inheritance doesn't only apply to direct descendants of a tag either, but will be applied to all generations of that tag. Not all CSS properties are inheritable for reasons that will become clear throughout this lesson, where we explore inheritance and how it helps to streamline our CSS.

HTML Family Tree

In the following diagram we are displaying a fairly typical HTML family tree. As you can see the body tag is the daddy and all other tags descend from it. Also notice tags like the h2 tag which has no descendants and the div tags which has multiple descendants.

HTML Family Tree

Viewing Inheritance

Ok, using the above HTML tree as a template lets see the effect of style inheritance.

Open up the file with Notepad we created and tested in Lesson 4: Pseudo Selectors.

You saved the file to your computer in the C:\_CSSIntermediate folder as lesson_4_csspage.html

Copy and paste the following code into the reopened file, overwriting the existing text.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for Style Inheritance follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Intermediate CSS - Lesson 5 - Style Inheritance</title>

<style type="text/css">

/* Lets give some style to the body tag so we can see the effects of inheritance */
body {
  font: 1.3em "Comic Sans", Georgia, "Times New Roman", Times, serif;
  background-color: orange;
  border: 2px solid black;
  padding: 10px;
  margin: 10px;
}

#div1 {
  background-color: yellow;
}

#img1 {
  border: 2px solid white;
}

#div2 {
  background-color: olive;
}

#div2 p {
  font: 1.2em Courier, sans-serif;
}


</style>

</head>
<body>
<h1>CSS Intermediate Lesson 5 - Style Inheritance</h1>
<div>
<h2>A division using inheritance</h2>
<p>
<img id="img1" src="http://server2client.com/images/chickenpiesmall.jpg"
     alt="Chicken Pie"  width="300"  height="200" />
Some paragraph <em>text</em> here.</p>
</div>
<div id="div1">
<h2>A division using an id style</h2>
</div>
<div id="div2">
<h2>Another division using an id style</h2>
<p>Some filler text. Some filler <strong><em>text</em></strong>. Some filler text. 
Some filler text. Some filler text. Some filler text. Some filler text. 
Some filler text. Some filler text. Some filler text. Some filler text. 
</p>
</div>
</body>
</html>

Save the file in the C:\_CSSIntermediate folder as lesson_5_csspage.html and close the Notepad.

save inheritance

Viewing Our Saved File

From the C:\_CSSIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

inheritance

Reviewing The Code

We set a style for the entire body of the document with a background colour, large font, padding, borders and a margin. The first point of interest here is that not all CSS properties are inherited unless specified. The border CSS property for instance is not a good contender for inheritance, as this would mean all elements within the body element would also have borders.

The first division we set up in our HTML inherits the font CSS properties of its ancestor, the <body> html tag. In fact all tags will inherit these attributes unless overridden by another style. The actual font size of each child is determined by the user agent unless explicitly overridden by a subsequent style.

In the next division we just use a different background colour specified in a style but the font is still inherited.

In the last division we use a different background colour for the division but the font is still inherited. We specify a different font and font size for the paragraph in this division overwriting the inherited style.

Lesson 5 Complete

Play around with the CSS to get to grips with how inheritance works and how it helps streamlining of the CSS we have to write.

Related Tutorials

CSS Intermediate Tutorials- Lesson 6 - Specificity (the cascade)

What's Next?

In the next tutorial we look at specificity, what it means and the effects of the cascade.

CSS Reference

CSS Selectors

go to home page Homepage go to top of page Top