Styling Parent and Child Elements

In the previous lesson I went over how to tell the difference in Parent and Child Elements, but in this lesson I will teach you how to use them to your advantage.

As we went over a Parent dictates a Child element by default. What I mean by default is the Child does not always have to listen to the Parent and follow in styles.

I am going to show you both in HTML and CSS how this works.

• Styling with HTML:

<div id='Parent' style='background-color: red; font-size: 12px;>
This text would have a blue background and a font size of 12px. <div class='Child' style='background-color: blue;>
This text would have a red background and a font size of 12px. </div>
</div>

• Styling with CSS:

<div id='Parent'>
This text would have a blue background and a font size of 12px.
<div class='Child'>
This text would have a red background and a font size of 12px. </div>
</div>

• My CSS Styles:

#Parent {
background-color: red;
font-size: 12px;
}
.Child {
background-color: blue;
}

In both these code above the background for the Parent is red and the Child is blue. If I did not style the Child background the traits of its Parents background would be the same. But since I added a background style into the Child element it overrides the Parents style for that text. Since I did not add a font size style to the Child, the font size will follow the traits of the Parent.