Children Inherits Properties of Their Parents

In real life, children inherit properties of their parents unless they define their own. For example, children will inherit skin, hair or eyes colors or features from their parents. However, they can become teenagers and decide to change their hair color to another color from which they were born with.

Even so, this real world concept holds true for many web applications and technologies (e.g., HTML, CSS, JS, OOP). In this training, we will demonstrate several examples to prove this point.

It is helpful to think that when you have one object inside of another object, you create a parent/child relationship. Wherever, the parent goes, the child goes. However, once the child is born, it inherits some of its parent properties but it also may have its own set of properties independent of its parent and it may override properties of its parent.

As with many of the training on programming, remember you do the following three steps:

Create an object
Give the object a name
Tell the object to do something (using CSS or JavaScript)

Cascading Style Sheets (CSS)

First, let’s create the object (e.g., the parent object), give it a name and tell it to do something with CSS.

Create a new blank HTML framework and write the following highlighted code between the <body> tag:

<!doc type html>
<html>
<head>
<meta charset="utf-8">
<title>Children Inherits Properties Of Its Parents</title>
</head>
<body>
<div id="parent">Jane Doe</div>
</body>
</html>

Above the closing head tag add the following highlighted set of script tag along with the ID selector named parent that targets the <div> tag in the body with the same id attribute name.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Children Inherits Properties Of Its Parents</title>
<style>
#parent{
width:100px; 
height:100px;
background-color:blue;
color:white;
font-weight:bold;
font-family:Arial;}
</style>
</head>
<body>
<div id="parent">Jane  Doe</div>
</body>
</html>

CHECK POINT: You should see the blue box in the Design view with the name Jane Doe in it. However, if you were to attempt to move the blue box by attempting to drag it, it will not move. That’s because it is currently part of the page. In the next steps, you will see how to move the blue box.

Add the following highlighted position property to the parent ID selector:

<style>
#parent{
width:100px; 
height:100px;
background-color:blue;
color:white;
font-weight:bold;
font-family:Arial;
position:absolute;}
</style>

CHECK POINT: You should see that the blue box now has a handle in the top/left corner. Hover the mouse over this handle and drag the blue box down and to the right of where it is currently location about 100px in each direction. Now, if you look back at the CSS style tag, you will see the top and left properties were AUTOMATICALLY added to the style rule.

Now, let’s give the parent a baby on the inside of her.

Write the following highlighted <p> tag to add a baby to the parent object:
```
<body>
<div id="parent">Jane Doe
<p id="baby">Baby Doe</p>
</div>
</body>
```
CHECK POINT: You should now see the baby <div> is comfortable nested on the inside of the parent <div> . Now, select the parent handle again and move it anywhere on the screen. You should see that the baby moves along with the mother because it is still inside of its mother.

Now, let’s pass some of the mothers’ DNA into the baby so it can inherit some of the properties of its mother

Copy the parent ID selector and paste it below it and modify the properties so that some of them are different from the mother (e.g., smaller size since it is still in the mother) to create a baby ID selector.
CHECK POINT: Notice that the baby is now OUTSIDE of the object because its position property. For the mother, the reference point is the <body> tag or the top/left corner of the browser. However, for the child it is the top/left corner of its mother (not the browser). This will be resolved in the next step.
Move the baby BACK into the mother object.
CHECK POINT: Now, select the mother handle and move it somewhere else on the screen. You will see the BOTH the mother and the baby will move together.
CHECK POINT: Now, move the baby WITHIN the mother (e.g., as though it was kicking). Notice the the mother did not move—only the baby.

NOTE: You don’t won’t to move the baby OUTSIDE of the mother just yet (otherwise, it would be born premature). And, if you move the mother again, the baby again moves along with it.

Now, let’s “deliver” the baby by moving it OUTSIDE of the mother in the <body> tag.

Move the set of <p> tag OUTSIDE of its mother <div> tag in the HTML code (not the CSS style):
```
<body>
<div id="parent">Jane Doe</div>
<p id="baby">Baby Doe</p>
</body>
```
CHECK POINT: In Design View, notice that the baby moved outside of the mother because it was moved outside of the <div> tag. Notice also the baby position property is now relative to its grandparent—the <body> tag.

Now, let's change the color of the child to override the parent DNA.

Change the background-color property to a different color than its mother:

#baby{
width: 40px;
height: 40px;
background-color: red;
color: white;
position: absolute;
left: 48px;
top: 54px;
font-weight: bold;
font-family: Arial; }

CHECK POINT: You should see that the baby turned color and has overwritten its parent DNA color that it was born with. Proving the fact that a child can inherit its parents properties UNLESS it DEFINES its own.

HyperText Markup Language (HTML)

Add later...

JavaScript (JS)

Add later...

Object Oriented Programming (OOP)

Add later...