Understanding Inheritance of Style Properties

Inheritance means the style of one set of tags is inherited by another set of tags. For instance, say you have a style named Bob defined like this:

.Bob { font-family: Arial; font-size: small; }

Then you applied the style to the body like this:

<BODY class="Bob">

Inside the body, every other tag will inherit the properties of the style sheet Bob, so text would use the Arial font and be small. Now, suppose in the same document, we have a second style named Dave:

.Dave { font-size: large; }

And then we applied the style Dave to a paragraph within the body tags like this:

<BODY class="Bob">
   <P class="Dave">Hello</P>
</BODY>

What would happen? Because tags within the body inherit the Bob style, the word "Hello" would use the Arial font. However, since the properties of Dave override the properties of Bob, "Hello" would appear large, not small.

Rate This Article

You must be signed in to rate articles.