Basic and Advance CSS Examples and Concepts Question:
What Is Style Property Inheritance in CSS?
Answer:
Style property Inheritance is a rule that allows a style property of a child HTML tag to inherit the same property of the parent HTML tag, if that property is not defined on the child tag. This inheritance rule is very important because a lots of style properties are defined on the parent tags and inherited to the child tags. The CSS below shows you how to define most of the font properties on <P> tags and let <STRONG> and <EM> to inherit them:
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {font-family: arial; font-size: 12pt; color: yellow}
STRONG {font-weight: bold}
EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>GlobalGuideLine.com</strong>.
You should see this text in <em>yellow</em>
on black background.</p>
</body></html>
As you can, the font family, size and color in <STRONG> and <EM> are inherited from <P>.
<html><head>
<title>CSS Included</title>
<style type="text/css">
BODY {background-color: black}
P {font-family: arial; font-size: 12pt; color: yellow}
STRONG {font-weight: bold}
EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>GlobalGuideLine.com</strong>.
You should see this text in <em>yellow</em>
on black background.</p>
</body></html>
As you can, the font family, size and color in <STRONG> and <EM> are inherited from <P>.
| Previous Question | Next Question |
| How To Group CSS Definitions Together? | What Is CSS Cascading? |