बुनियादी selectors और रंग

element, class और id selectors के साथ तत्वों को सटीकता से निशाना बनाना सीखें, फिर उन पर रंग लगाएं।

9 मिनट · 3 प्रश्न

एक selector किसी CSS नियम का वह भाग है जो बताता है कि किन तत्वों को शैली देनी है। सबसे सरल है element selector: आप टैग का नाम लिखते हैं, बिना कोणीय कोष्ठकों के। p हर अनुच्छेद को निशाना बनाता है, h1 हर सर्वोच्च-स्तरीय शीर्षक को। यह अच्छी तरह काम करता है, लेकिन कभी-कभी यह बहुत व्यापक हो जाता है: क्या हो अगर आप दस में से केवल एक अनुच्छेद को रंगना चाहें? यहीं classes और ids काम आते हैं।

एक class एक लेबल है जिसे आप class विशेषता के साथ एक या अधिक HTML तत्वों से जोड़ते हैं। CSS की ओर, आप इसे एक बिंदु से निशाना बनाते हैं: .important हर उस तत्व को चुनता है जिस पर class="important" है। एक id एक अनन्य लेबल है: यह प्रति पेज केवल एक बार दिखना चाहिए, उदाहरण के लिए शीर्ष पट्टी पर। CSS की ओर, आप इसे एक हैश से निशाना बनाते हैं: #header।

<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>

#main-title {
  color: darkgreen;
}

.highlight {
  background-color: yellow;
}

p {
  color: black;
}

इस उदाहरण में, शीर्षक गहरा हरा हो जाता है, highlight लेबल वाले दोनों अनुच्छेदों को पीली पृष्ठभूमि मिलती है (background-color पृष्ठभूमि का रंग तय करती है), और हर अनुच्छेद का पाठ काला होता है। अंतर याद रखें: एक class जितने चाहें उतने तत्वों पर दोबारा इस्तेमाल हो सकती है, जबकि एक id पेज के भीतर अनन्य होती है। संदेह हो तो class इस्तेमाल करें।

अब रंगों की बात करते हैं। CSS कई अंकनों को स्वीकार करता है। रंगों के नाम (red, blue, orange...) सरल हैं पर सीमित। हेक्साडेसिमल अंकन # से शुरू होता है और उसके बाद छह अक्षर आते हैं जो लाल, हरे और नीले की मात्रा तय करते हैं: #ff0000 एक शुद्ध लाल है। अंत में, rgb() अंकन उन्हीं मात्राओं को 0 से 255 तक की संख्याओं में व्यक्त करता है: rgb(255, 0, 0) भी एक शुद्ध लाल है।

.highlight {
  color: tomato;
  background-color: #fff3cd;
}

#main-title {
  color: rgb(0, 100, 0);
}

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. कौन-सा CSS selector हर उस तत्व को निशाना बनाता है जिस पर class="menu" है?
   • #menu
   • .menu
   • menu
   • class.menu
2. किसी class और किसी id के बीच मुख्य अंतर क्या है?
   • एक id कई तत्वों पर रखी जा सकती है, एक class नहीं
   • एक class दोबारा इस्तेमाल हो सकती है, एक id पेज के भीतर अनन्य होनी चाहिए
   • Classes केवल अनुच्छेदों पर काम करती हैं
3. इनमें से कौन-सा मान एक शुद्ध लाल को दर्शाता है?
   • rgb(0, 0, 255)
   • #00ff00
   • #ff0000
   • rgb(0, 255, 0)