CSS Inheritance

I just learned about this Inheritance thing in CSS and tried this. According to what I’ve learned from the comments section the color of the text inside the paragraph tags should be orange but it is red, can someone explain why? <html> <head> <style> p{color:red;} body{color:green;} .myclass{color:orange;} </style> </head> <body> <div class=“myclass”> <p>Click here for more resources.</p> </div> </body> </html>

css inheritance help noob

8th May 2020, 4:11 PM

okurpants

5 Answers

+ 3

That is because it works from HTML side not CSS side. If you have properties written for any selector then it will not inherit from parent <div class="myClass"> <p>this will be red</p> <span>this will be orange</span> </div> p { color: red; } .myClass { color: orange; }

8th May 2020, 5:27 PM

Raj Chhatrala

+ 1

.parent-class .child-class { /*Add something here */ }

8th May 2020, 4:36 PM

CodeFu

All I see is p has red colour , then div class has white color Then body has green color So the inner most style applies on the text which in this is case is paragraph color:red

8th May 2020, 4:15 PM

Abhay