Home/ Questions/Q 520383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T08:08:22+00:00

My question is straight: why there is inherit value for (almost) all the properties

  • 0

My question is straight: why there is “inherit” value for (almost) all the properties in HTML-CSS .. even-though all browsers support inheritance for all (as per my observation, yes, all) the properties ..

When I asked google about it .. I could come up with a statement saying

“Even though certain characteristics
are inherited automatically in CSS,
there may be situations in which you
want to increase the weight of the
inherited property. Specifying a value
of inherit for any CSS property that’s
applied to an element will cause the
element to gain its parent’s computed
value for the property in question. By
specifying in the author style sheet
that a property should inherit its
value, you can increase its weight.”

Now this was yet more confusing .. what is this “increasing the weight”?

is it something like .. trying to stay secure .. (so as to not to trust the browser’s inbuilt capability of inheritance ) or to have more understandable code?      I am not clarified ..

Also some people mention that

“Internet Explorer 7 and earlier
versions don’t support the value
inherit for any properties other than
direction and visibility.”

if it is true .. then it drives the reason(??) for using “inherit” value yet more weak ..

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Refer to the W3C’s specification for ‘inherit’ value.

    Excerpt:

    The ‘inherit’ value can be used to
    strengthen inherited values, and it
    can also be used on properties that
    are not normally inherited.

    To me, this is a better phrasing rather than “increase the weight of the inherited property”.

    As for the IE7 inherit question, check this SO post on IE7 CSS inherit problem

    UPDATE:
    Using K Prime‘s sample code, here’s the test I did on IE7 vs IE8/FF3.5

    Html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
p { color: #666; }
p a { color: blue; text-decoration: underline; }
p a.inactive { color: inherit; text-decoration: none; }
</style>
</head>
<body>
<a href="#">should be default</a>
<p>
<a href="#" class="inactive">should be grey</a>
<a href="#">should be blue</a>
</p>
</body>
</html>

    IE7 output:
    IE7

    IE8/FF3.5 output:
    IE8/FF3.5

    So well, IE7 failed the ‘inherit’ test for this one.

    • 0