How to Use the CSS Property Value Inherit

  • google plus

In Brief...

Many properties take the value inherit. This specifies that the property value should be inherited from the parent element. If such a property is left undefined, the implicit value is inherit. The following three steps show how to use the CSS property value inherit.

Take our Introduction to CSS Training course for free.

See the Course Outline and Register

Instructions

  1. Add the rule for p to set the font-style of paragraphs to none, which means plain, non-italicized text. Add the rule for em to set the font-style for emphasized text, which is usually italic, to inherit. This means that, in the HTML below the CSS (step 2), the em tag will inherit the none value from the containing p tag. Also set the text-decoration property to underline so you can still see that the tag's content is emphasized:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>Inherit</title>
    		<style>
    		p {
    			font-style: none;
    		}
    		
    		em {
    			font-style: inherit;
    			text-decoration: underline;
    		}
    		</style>
    </head>
    <html>
  2. In the body, place the em tag around the word inherit.
    <body>
    	<p>Even the word <em>inherit</em> isn't italicized.</p>
    	</body>
    </html>
  3. The final markup will look like this:
    <!DOCTYPE HTML>
    <html>
    	<head>
    	<meta charset="utf-8">
    	<title>Inherit</title>
    		<style>
    		p {
    			font-style: none;
    		}
    		
    		em {
    			font-style: inherit;
    			text-decoration: underline;
    		}
    		</style>
    	</head>
    		<body>
    		<p>Even the word <em>inherit</em> isn't italicized.</p>
    		</body>
    </html>
  4. The rendered text will look like this:
    Inherit

Author: Chris Minnick

Chris is a prolific author and trainer, and the CEO of WatzThis?. His published books include Writing Computer Code, JavaScript for Kids, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW eCommerce Certification Bible, and New Riders' XHTML.

Discuss