Implementing inheritance in CSS3

Using inheritance

Some styles applied to a parent element are automatically inherited by children elements. To prevent the inheritance you need to specify the element's style individually.

The following code demonstrates the CSS inheritance:

<head>
<style type="text/css">
    #div1 div {
        font-family: sans-serif;
        color: green;
        }
    #div1 div {
        font-family: sans-serif;
        color: green;
        }   
    #div2 p {
        font-family: serif;
        color: blue;
        }
</style>
</head>
<body>
    <div id="#div1">
        hello div world.
        <p>Hello paragraph world.</p>
    </div>
    <div id="#div2">
        hello div world.
        <p>Hello paragraph world.</p>
    </div>
</body>

Overriding inheritance using !important

If you want to override and force an element's style on the page, you simply add the !important keyword to the style you want to have applied.

The !important notation tells the parser to give that style priority.

The following code demonstrates the use of the !important keyword:

<head>
<style type="text/css">
    p {
        font-family: serif;
        color: blue;
        }
    p { color: purple !important; }
    p { color: yellow;  }
</style>
</head>
<body>
    <h2>Overriding inheritance using !important</h2>
    <p>THE COLOR IS PUPLE BECAUSE (color: purple !important; )</p>
</body>

Ads Right