Trainer thoughts on web design techs and tools

I had a student ask to see an example of the inherit property in CSS. It is a little hard to demonstrate, because most of the time the property does not change anything as it is the default value in most cases. However, it can be used to turn off the default browser-assigned property of a tag.

Very quickly for those new to the inherit property in CSS, when a property is assigned the inherit value it indicates that the property should be inherited from the parent element. This is default behavior in HTML. For example, take the following code:

<h1>The <em>Inherit</em> Value</h1>

The text within the em tag will also be big and bold, because it inherits size and weight from the h1 tag.

We can also use inherit to turn off default properties. For example, look at the following CSS:

1
2
3
4
5
6
7
8
p {
	font-style:none;
}
 
em {
	font-style: inherit;
	text-decoration:underline;
}

The rule for p sets the font-style of paragraphs to none, which means plain, non-italicized text. We don’t really have to do this as the default value for font-style for paragraphs is none.

Now take a look at this HTML:

<p>Even the word <em>inherit</em> isn't italicized.</p>

The em tag will now inherit the none value from the containing p tag. We also set the text-decoration property to underline, so we can still see that the tag’s content is emphasized:

I hope that gives a better understanding of how inherit works. This is also covered in our CSS classes.

No TweetBacks yet. (Be the first to Tweet this post)

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© Webucator, Inc. All rights reserved. | Toll Free: 877-932-8228 | UK: 0808-101-3484 | From outside the USA: 315-849-2724 | Fax: 315-849-2723