+ 3

inherit

can you please explain Inherit value to me? how to use it?

22nd Nov 2017, 12:09 PM
Neriya
Neriya - avatar
5 Answers
+ 2
#parentDiv{color:red;} p{color:blue;} #childP{color:inherit;} The element with inherit property value inherits that same property of it's direct parent. In my example, the p element text will have red color. not blue.
22nd Nov 2017, 2:51 PM
Jonathan Pizarra (JS Challenger)
Jonathan Pizarra (JS Challenger) - avatar
+ 1
<p>one</p> <p class=a>two</p> <p id=b class=a>three</p> p {color:green;} .a {font-weight:bold;} #b {font-size:24px;color:red;} one will display in green as only the first CSS style applies to it. two will display in green with bold text as the first two styles apply to it. three will display in red with 24px size and bold text. All three styles apply to it, but the red color replaces the green.
22nd Nov 2017, 12:35 PM
John Wells
John Wells - avatar
+ 1
Thank you for the example. It doesn't answer how to use inherit.. The word inherit itself should be used in the example. I would much appreciate if you can up vote my question šŸ˜ƒ
22nd Nov 2017, 12:44 PM
Neriya
Neriya - avatar
0
Fine. three inherits the color green and bold font.
22nd Nov 2017, 12:59 PM
John Wells
John Wells - avatar
0
i found this: body { background-image: url("http://www.sololearn.com/uploads/css_logo.png"); background-repeat: repeat-x; } p { background-image: url("http://www.sololearn.com/uploads/css_logo.png"); background-repeat: inherit; margin-top: 200px; padding: 50px; }
29th Apr 2020, 7:47 PM
Almo Sawwaraty