Inheritance
Description
If the browser can't find a value in one of the available styles, it will use inheritance.
Inheritance means taking the value for the property defined by the parent element.
Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!--from w w w . ja v a 2 s .c om-->
color:white;
background:grey;
border: medium solid black;
}
</style>
</head>
<body>
<a href="http://java2s.com">website</a>
<p>This is a <span>test</span>.</p>
<a href="http://w3c.org">W3C</a>
</body>
</html>
The span element's parent is a p element.
span element inherits the color property from the parent p element.
Note
Not all CSS properties are inherited.
Only the appearance related are inherited, including text color, font details, and so forth.
Layout related are not inherited.
inherit
You can force inheritance by using the inherit in a style,
inherit explicitly tells the browser to use the parent element's value for the property.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {<!-- w ww .j a v a 2 s . c o m-->
color:white;
background:grey;
border: medium solid black;
}
span {
border: inherit;
}
</style>
</head>
<body>
<a href="http://java2s.com">website</a>
<p>This is a <span>test</span> from java2s.com.</p>
<a href="http://w3c.org">W3C</a>
</body>
</html>