Understanding Inheritance - HTML CSS CSS

HTML CSS examples for CSS:Introduction

  1. HOME
  2. HTML CSS
  3. CSS
  4. Introduction

Introduction

If the browser can't find a value for a property, it will use inheritance, which means taking the value for the property defined by the parent element.

span element whose parent is a p element uses the style from p.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            p {<!--   w w  w . ja  v a 2  s  .  co m-->
                color:white;
                background:grey;
                border: medium solid black;
            }
        </style>
    </head>
    <body>
        <a href="http://java2s.com">Website</a>
        <p>I like <span>CSS</span> and HTML.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

Not all CSS properties are inherited.

The appearance related style are inherited, for example text color, font details, and so forth.

The layout related style are not inherited.

You can force inheritance by using the special value inherit in a style.

Using the Special Inherit Value

Demo Code

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <style type="text/css">
            p {<!--from   w ww .  ja va 2s . 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>I like <span>CSS</span> and HTML.</p>
        <a class="myclass1 myclass2" href="http://w3c.org">Visit the W3C website</a>
    </body>
</html>

Related Tutorials