 |
| HTML and CSS tutorial for beginners in Hindi |
हेलो फ्रेंड्स, KTL के HTML और CSS tutorial में स्वागत है। आज हम लेसन २२ सीखेंगे।
पिछले लेसन में हम ने internal CSS और inline CSS सीखे।
आज हम CSS selector देने के अलग अलग तरीके देखेंगे।
CSS selector types
Selectors तीन तरह से define कर सकते हैं।
1. Element selector, 2. id selector and 3. Class selector.
हम इन को समझ लेंगे।
1. CSS element selector:
इस में स्टाइल define करने के लिए element के नाम का उपयोग करते हैं। उदाहरण देखिये:p {
color: blue;
}
यहाँ हमने paragraph के लिए CSS स्टाइल लिखा है। इस लिए हमने "p" लिखा है और उसमें स्टाइल दिया है। इससे body में जहाँ जहाँ <p> tag आएगा वहाँ टेक्स्ट कलर अपने आप blue हो जाएगा। हमें body में इसके लिए और कुछ भी लिखने की जरूरत नहीं है।
हम यह अपने स्क्रिप्ट में लिखेंगे। एक Notepad फाइल ओपन कीजिये। इस में Lesson 21-1 का सारा कोड कॉपी कीजिये। <head> के नीचे कमेंट लिखिए
<! Example of element selector>
हम को यहाँ कुछ भी बदलने की जरूरत नहीं है। हम ने इसमें element selector ही लिखा है। इसे "Lesson-22-1" और "Lesson-22-1.html" के नाम से save कीजिये। Source कोड की PDF फाइल देखने के लिए आकृति २२-१. पर क्लिक कीजिये।
 |
| आकृति २२-१. CSS element selector in Hindi |
यहाँ हमने h1 और p के लिए स्टाइल लिखा है। इस लिए body में यह elements जहाँ जहाँ आएंगे उनमें उनको दी हुई स्टाइल आएगी।
 |
| आकृति २२-२ Output of code using CSS element selector |
HTML document को डबल क्लिक कीजिये और आउटपुट देखिये। आउटपुट में हमने दी हुई स्टाइल्स आयी है।
२. CSS id selector:
अब id selector देखेंगे। फिर एक नयी Notepad file ओपन कीजिये। इस में Lesson-22-1 का पूरा टेक्स्ट कॉपी कीजिये। याद रखिये हम केवल CSS लिखने का तरीका बदल रहे हैं। इस लिए हम head में जो style है उसी का कोडिंग बदलेंगे।style के नीचे यह कोड कॉपी कीजिये।
#header {
color: red;
text-align:center
}
#para1 {
color:blue;
}
हम id selector के लिए # sign का उपयोग करते हैं। अब इस declaration का body में उपयोग करेंगे। हम ने दो selectors लिखे हैं, एक h1 और दूसरा para1। इनको opening tags में ऐसा देते हैं।
<h1 id="header">Earth - My Planet<h1>
दोनों <p> tags के लिए लिखिए <p id="para1">
 |
| आकृति २२-३. CSS id selector in Hindi |
अगर हम ने <p> में id लिखा तो स्टाइल आएगा, अगर यह नहीं लिखा तो स्टाइल नहीं आएगा।
Source कोड की PDF फाइल देखने के लिए आकृति २२-३. पर क्लिक कीजिये। इस फाइल को "Lesson-22-2" और "Lesson-22-2.html" के नाम से save कीजिये। HTML document पर डबल क्लिक कीजिये और आउटपुट देखिये। यह आकृती २२-२ जैसा ही है।
3. CSS class selector:
अब हम class selector के लिए कोड लिखेंगे। एक नयी Notepad फाइल ओपन कीजिये और उसमे Lesson-22-2 का सारा कोड कॉपी कीजिये। हमें केवल <style> में बदल करना है।जहाँ हम ने #header लिखा है वहाँ .header कीजिये। वैसे ही जहाँ #para1 लिखा है वहाँ .para1 लिखिए। अब यह दो classes हो गए। अब इसे body में कैसा refer करेंगे? हमने <h1> और <p> के tags में "id" लिखा है, उस जगह "class" लिखिए।
 |
| आकृति २२-४. CSS class selector in Hindi |
Source कोड की PDF फाइल देखने के लिए आकृति २२-४. पर क्लिक कीजिये। इस फाइल को "Lesson-22-03" और "Lesson-22-03.html" के नाम से save कीजिये। HTML document पर save कीजिये और आउटपुट देखिये। आउटपुट आकृती २२-२ में दिखाया है।
याद रखिये: हम ने selector लिखने के तीन तरीके देखे हैं। इन का आउटपुट same हैं।
अगर हमने एक element के अंदर दूसरा element लिखा है (nesting किया है) तो nested element (अंदर का element) parent element की properties लेता है (inherit करता है)।
CSS define करने के लिए हम एक से ज्यादा selectors combine कर सकते हैं। जैसे:
h1, h3, p {
color: red;
}
Important Points:
१. Element selector में जिस element के लिए स्टाइल लिख रहे हैं उस element का नाम लिखा जाता है।२. Id selector के लिए # का उपयोग किया जाता है। इसे body में refer करने के लिए ओपनिंग tag में "id=" लिखा जाता है।
३. Class selector के लिए . (period symbol) का उपयोग किया जाता है। इसे body में refer करने के लिए ओपनिंग tag में "class=" लिखा जाता है।
लेसन २१ लेसन २३
