Theory
Cascading Family Tree
आप अपनी portfolio site के <body> tag पर एक ख़ूबसूरत font style और gray color set करते हैं, उम्मीद करते हुए कि यह आपका पूरा page style करेगा। यह आपके paragraphs और lists के लिए बिल्कुल सही काम करता है। पर जब आप अपने hyperlinks देखते हैं, वे अब भी एक ज़िद्दी, default चमकीले blue underline के साथ हैं। कुछ elements अपने parent styles क्यों आसानी से copy करते हैं जबकि दूसरे उन्हें पूरी तरह नज़रअंदाज़ करते हैं? browser कैसे तय करता है कि आपकी HTML structure के ज़रिए कौन सी styles नीचे पास होती हैं?
Theory
DNA और पैतृक Property
अपनी HTML document structure को एक family tree की तरह सोचिए। जब एक grandparent एक estate सौंपते हैं या एक parent eye color जैसा genetic trait सौंपते हैं, children इसे बिना पूछे स्वाभाविक रूप से विरासत में पाते हैं। यह text colors या font families के आपके webpage पर नीचे बहने जैसा है। पर, कुछ items अत्यधिक व्यक्तिगत हैं। एक parent की custom leather jacket या tailored shoes बच्चे को फ़िट करने के लिए अपने-आप सिकुड़ती या फैलती नहीं। CSS में, margins, padding, और borders जैसी properties व्यक्तिगत traits हैं जिन्हें elements कभी अपने children को नहीं सौंपते।
Theory
DOM Trees और CSS Inheritance
एक HTML document को एक hierarchical tree structure में parse किया जाता है जिसे Document Object Model (DOM) कहते हैं। इस tree में, अन्य tags के अंदर nested tags children हैं, जबकि लपेटने वाले tags parents हैं। CSS Inheritance वह mechanism है जिसके ज़रिए ख़ास property values एक parent element से इसके descendant elements तक नीचे पास होती हैं। यह आपको webpage पर हर एक nested tag के लिए दोहराया styling code लिखने से बचाता है।
At a glance
document structure भर आम CSS properties का behavior।
| Property Type | अपने-आप Inherit होता है? | Examples |
|---|---|---|
| Text & Font Properties | हाँ | color, font-family, font-size, line-height, text-align |
| Box Model Properties | नहीं | margin, padding, border, width, height |
| Background & Layout | नहीं | background-color, background-image, display, position |
Practical
एक Portfolio Section में Inheritance
<section style="color: darkgreen; border: 2px solid black;">
<h2>Project Title</h2>
<p>This is a description of my placement project.</p>
</section>
/* Let us analyze what happens:
1. The <section> is the parent element.
2. The <h2> and <p> elements are its children.
3. <h2> and <p> inherit color: darkgreen automatically.
4. <h2> and <p> DO NOT inherit the black border. */This example runs in Gri-Learn on the web, where you can edit it and see the output.
Quiz
अगर आप एक `<div>` tag पर 'margin: 20px;' set करते हैं, इसका nested `<p>` tag default रूप से कौन सा margin विरासत में पाएगा?
- 20px
- 0px
- 10px
- यह दोगुना margin (40px) विरासत में पाएगा
Show the answer
0px
Margin एक box model property है। margins, padding, और borders जैसी box model properties non-inherited हैं। <p> tag parent का margin विरासत में नहीं पाता और अपना ख़ुद का default margin value बनाए रखता है, जो browser stylesheet द्वारा अन्यथा निर्दिष्ट न होने पर 0px है।
Think first
Inheritance को स्पष्ट रूप से मजबूर करना
मान लीजिए आप चाहते हैं कि एक child element अपने parent से background-color जैसी एक non-inherited property विरासत में पाए। मन में उस ख़ास CSS value का अनुमान लगाइए जो आप इसे हासिल करने के लिए इस्तेमाल कर सकते हैं। tap करने से पहले सोचिए।
Show the answer
आप 'inherit' keyword इस्तेमाल कर सकते हैं। उदाहरण के लिए, child element पर 'background-color: inherit;' लिखना इसे अपने तत्काल parent element का background color value देखने और copy करने पर मजबूर करता है।
Watch out
Inherited Form और Link का अपवाद
university practical exams में एक classic mark गँवाने वाला जाल यह मान लेना है कि सारे text elements styles पूरी तरह विरासत में पाते हैं। Form inputs, textareas, buttons, और hyperlinks (<a> tags) में ज़िद्दी user agent browser defaults हैं। भले आप <body> tag पर एक global font family या color set करें, ये ख़ास elements इसे नज़रअंदाज़ करेंगे। आपको उनकी appearance बदलने के लिए अपनी stylesheet में links और form components को सीधे target करना होगा।
Theory
साफ़ और Scalable Code Architecture
inheritance समझना नौसिखिए coders को professional developers से अलग करता है। पचास अलग text tags के लिए font rules लिखने के बजाय, professionals <body> या :root selector पर एक अकेला font family और global text color लागू करते हैं। यह document tree को भारी काम करने देता है। जब आप बड़े multi page applications बनाते हैं या Semester 3 में frameworks इस्तेमाल करते हैं, inheritance का लाभ उठाना आपकी stylesheets को छोटा, पढ़ने-लायक़, और modify करने में अविश्वसनीय रूप से तेज़ रखता है।
Formula
Inheritance Questions का Exam Formula
जब एक theory exam में CSS inheritance समझाने को कहा जाए, इस बिल्कुल structure का इस्तेमाल कीजिए:
- 1. DOM Hierarchy: एक छोटे nested tag example इस्तेमाल करके parent, child, और descendant relationships समझाइए।
- 2. Inherited बनाम Non-Inherited: दोनों categories परिभाषित कीजिए। हर एक के 3 साफ़ examples दीजिए (जैसे color बनाम border)।
- 3. Exception Rules: बताइए कि hyperlinks और form controls browser defaults के कारण fonts या colors विरासत में नहीं पाते, और explicit समाधान के रूप में 'inherit' keyword का ज़िक्र कीजिए।
Summary
Key takeaways
- HTML DOM tree सख़्त parent, child, ancestor, और descendant relationships बनाता है।
- CSS Inheritance अपने-आप typographic और text styling parents से children तक स्थानांतरित करता है।
- margins, padding, borders, और backgrounds जैसे box model attributes कभी अपने-आप विरासत में नहीं जाते।
- Hyperlinks और form elements browser default styles इस्तेमाल करके स्वाभाविक inheritance को override करते हैं।
- inherit keyword parent style adoption मजबूर करने के लिए किसी भी property को explicit रूप से assign किया जा सकता है।
- Memory Hook: Fonts और colors line के नीचे बहते हैं, पर boundaries और boxes सख़्ती से मेरे रहते हैं।