CSS गुणों का इनहेरिटेंस

मान लीजिए कि हमारे पास एक पैराग्राफ है, और उसमें i टैग में कुछ टेक्स्ट है:

<p>
	This is some <i>text</i> in paragraph.
</p>

आइए पैराग्राफ को लाल रंग में रंगें:

p {
	color: red;
}

परिणामस्वरूप न केवल पैराग्राफ का टेक्स्ट रंगा जाएगा, बल्कि i टैग का टेक्स्ट भी रंगा जाएगा:

सारा मामला यह है कि color गुण इनहेरिट होता है। इसका मतलब है कि यदि पैरेंट टैग का कोई रंग सेट है, तो वही रंग चाइल्ड तत्वों का भी होगा। सभी CSS गुण इनहेरिट नहीं होते, लेकिन कई होते हैं (जो आप जानते हैं - वे सभी इनहेरिट होते हैं)।

हालांकि, इच्छा होने पर, चाइल्ड के लिए सेलेक्टर देकर पैरेंट के गुण को ओवरराइड किया जा सकता है। उदाहरण के लिए, आइए पैराग्राफ को लाल रंग दें, और इटैलिक टेक्स्ट को नीला रंग दें:

<p>
	This is some <i>text</i> in paragraph.
</p>

p {
	color: red;
}
i {
	color: blue;
}

ऐसे मामले में CSS कोड में सेलेक्टरों का क्रम कोई मायने नहीं रखता। यदि i सेलेक्टर और p सेलेक्टर को आपस में बदल दें, तो भी सब कुछ काम करेगा वैसे ही:

<p>
	This is some <i>text</i> in paragraph.
</p>

i {
	color: blue;
}
p {
	color: red;
}

कोड का अध्ययन करके बताएं कि b टैग के टेक्स्ट का कौन सा रंग होगा:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}

कोड का अध्ययन करके बताएं कि b टैग के टेक्स्ट का कौन सा रंग होगा:

<p>
	This is some <b>text</b> in paragraph.
</p>

p {
	color: blue;
}
b {
	color: red;
}

कोड का अध्ययन करके बताएं कि b टैग के टेक्स्ट का कौन सा रंग होगा:

<p>
	This is some <b>text</b> in paragraph.
</p>

b {
	color: red;
}
p {
	color: blue;
}

कोड का अध्ययन करके बताएं कि li टैग के टेक्स्ट का कौन सा रंग होगा:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}

कोड का अध्ययन करके बताएं कि li टैग के टेक्स्ट का कौन सा रंग होगा:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}

कोड का अध्ययन करके बताएं कि i टैग के टेक्स्ट का कौन सा रंग होगा:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

ul {
	color: blue;
}
li {
	color: red;
}
i {
	color: green;
}

कोड का अध्ययन करके बताएं कि i टैग के टेक्स्ट का कौन सा साइज होगा:

<ul>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
	<li>text <i>italic</i> text</li>
</ul>

i {
	font-size: 30px;
}
ul {
	font-size: 20px;
}
li {
	color: red;
	font-weight: bold;
}