Here is the code
body {
color: purple;
}
p {
color: blue;
}<body>
<p>
<h1>Hello</h1>
</p>
<h1>Hello</h1>
</body>Now problem here is that h1 does not inherit the color of element p which is its nearest parent.
I read that if color is not given, then its default value is inherit. So, first h1 should be blue. So, what is happening here ?
>Solution :
What is happening is caused by a problem with the HTML.
A p element cannot contain an h1 element so the system has closed the p element just before the h1 element. Hence the h1 element takes on the color of its nearest ancestor which has a color set and that is body in this case.
Try instead a legal bit of HTML, where the p is replaced with a div:
body {
color: purple;
}
div {
color: blue;
}<body>
<div>
<h1>Hello</h1>
</div>
</body>