Dan Levy

प्रश्नोत्तरी: क्या आप CSS मूल बातें जानते हैं? (2025)

क्या आप फ्रंट‑एंड में पर्याप्त हैं?

क्विज़: क्या आप CSS जानते हैं?

1. 

वार्म‑अप: फ़ॉन्ट्स

एक अमान्य ❌ font-size चुनें:

10cx गलत है क्योंकि cx कोई वास्तविक CSS इकाई नहीं है। (कम से कम लेखन के समय तक.)

लोकप्रिय इकाइयों में परिचित px, rem, em शामिल हैं।

नई इकाइयाँ गतिशील, उत्तरदायी लेआउट के लिए उपयोगी हैं।

  • ch - 0 अक्षर की चौड़ाई
  • vmin - viewport न्यूनतम
  • vmax - viewport अधिकतम
  • vh - viewport ऊँचाई
  • vw - viewport चौड़ाई

कुछ इकाइयाँ हमेशा से मौजूद हैं लेकिन कम उपयोग होती हैं, जैसे सेंटीमीटर के लिए cm, mm, इंच के लिए in, पॉइंट्स के लिए pt

2. 

वार्म‑अप: रंग

क्या आप एक वैध 👍 हेक्स कोड ढूंढ सकते हैं?

Hex codes को CSS में रंग दर्शाने के लिये इस्तेमाल किया जा सकता है। इन्हें # से शुरू किया जाता है और इनमें 3, 4, 6, या 8 हेक्साडेसिमल अंक होने चाहिए।

3‑अक्षर वाला हेक्स कोड 6‑अक्षर कोड का शॉर्टहैंड है, जहाँ प्रत्येक अक्षर दोहराया जाता है। 4‑अक्षर वाला कोड अल्फा चैनल (पारदर्शिता) शामिल करता है।

उदाहरण के लिये #ABC वही है जो #AABBCC और #ABCD वही है जो #AABBCCDD। हेक्स मानों को संभालने के बारे में अधिक जानने के लिये, मेरे जावास्क्रिप्ट नंबर क्विज़. को देखें।

3. 

वार्म‑अप: इकाइयाँ

इनमें से कौन-सी इकाई वैध CSS इकाई नहीं ❌ है?

ch, vmin, vmax, vh, vw जैसी इकाइयाँ डायनेमिक/रिस्पॉन्सिव लेआउट के लिए उपयोगी हैं।

कुछ पुरानी, कम इस्तेमाल होने वाली इकाइयाँ भी हैं: सेंटीमीटर के लिए cm, mm, इंच के लिए in, पॉइंट के लिए pt, pc, बड़े अक्षरों की ऊँचाई के लिए cap, और x अक्षर की ऊँचाई के लिए ex।

आम इकाइयाँ हैं पिक्सल के लिए px, एलिमेंट के फ़ॉन्ट आकार के सापेक्ष em, और रूट एलिमेंट के फ़ॉन्ट आकार के सापेक्ष rem। आखिरी नाम 90 के दशक के बैंड R.E.M. को श्रद्धांजलि नहीं है—बस नाम मिल गया!

4. 

सेलेक्टर: मूल बातें

निम्नलिखित HTML से कौन‑सा सेलेक्टर सबसे अच्छा मेल खाता है?

<a id="home" name="home" href="/home">Home</a>

सही उत्तर है a#home[name='home'], जो id और name दोनों एट्रिब्यूट्स से मेल खाता है। CSS सेलेक्टर्स केस‑सेंसिटिव होते हैं, इसलिए #Home काम नहीं करेगा, और स्पेस का मतलब चाइल्ड एलिमेंट्स होता है, जो यहाँ लागू नहीं होता।

:contains() सेलेक्टर मानक CSS सेलेक्टर नहीं है, लेकिन कुछ JS लाइब्रेरीज़ में उपलब्ध है।

5. 

सेलेक्टर: मूलभूत

निम्नलिखित HTML बटन से मेल खाने वाला सेलेक्टर कौन सा है?

<button onclick="openModal()">Contact</button>

सही उत्तर button[onclick] है, जो attribute onclick की मौजूदगी को लक्षित करता है।

ध्यान दें कि :link केवल अनदेखे href लिंक को लक्षित करता है, ::click एक वैध pseudo-element नहीं है, और :focus केवल फोकस किए गए तत्व को लक्षित करता है।

6. 

चयनकर्ता: मूलभूत

इनमें से कौन सा चयनकर्ता अमान्य है?

सेलेक्टर c > > d {} अमान्य है क्योंकि चाइल्ड कॉम्बिनेटर दो > अक्षरों के बीच कोई चयनकर्ता न होने के कारण दोहराया गया है।

अन्य चयनकर्ता मान्य हैं। c {} जैसा टाइप चयनकर्ता सिंटैक्टिक रूप से वैध CSS है, भले ही c एक मानक HTML तत्व न हो।

7. 

सेलेक्टर: मूलभूत

निम्नलिखित HTML में आखिरी लिंक से मेल खाने वाला सेलेक्टर कौन सा है?

<nav>
  <a name="home" href="/home">Home</a>
  <a name="login" href="/login">Login</a>
  <a name="help" href="/help">Help</a>
</nav>

सही सेलेक्टर a:last-child है, जो तब आखिरी <a> से मेल खाता है जब वह अपने पैरेंट का भी आखिरी चाइल्ड हो। nav:nth-child(3) एक <nav> एलिमेंट से मेल खाएगा जो अपने पैरेंट का तीसरा चाइल्ड हो।

8. 

सेलेक्टर: विशिष्टता

कौन सा सेलेक्टर प्राथमिकता लेगा?

ID के कारण a#quote सेलेक्टर को प्राथमिकता मिलती है, क्योंकि इसका विशिष्टता टैग या क्लास-आधारित सेलेक्टर्स से अधिक होती है।

9. 

लेआउट: केंद्रित करना

कौन-सी घोषणा इनलाइन टेक्स्ट को उसके ब्लॉक के भीतर क्षैतिज रूप से केंद्रित करती है?

ब्लॉक के भीतर टेक्स्ट को केंद्रित करने के लिए text-align: center; सही है। CSS में align नाम की प्रॉपर्टी नहीं है। margin: 0 auto; सीमित चौड़ाई वाले ब्लॉक को केंद्रित कर सकता है; वह ब्लॉक के भीतर टेक्स्ट को केंद्रित नहीं करता।

align-content समर्थित लेआउट संदर्भों, जैसे grid और कई पंक्तियों वाले flex कंटेनरों में सामग्री का संरेखण करता है। यह टेक्स्ट संरेखण की प्रॉपर्टी नहीं है। text-content कोई वैध CSS प्रॉपर्टी नहीं है।

10. 

लेआउट: केंद्रित करना

आधुनिक फ्लो लेआउट में ब्लॉक कंटेनर के भीतर सामग्री को लंबवत कैसे केंद्रित करें?

align-content का उपयोग करना आधुनिक तरीका है ब्लॉक कंटेनर की सामग्री को फ्लो लेआउट में लंबवत केंद्रित करने का।

align-items और justify-content प्रॉपर्टी flexbox और grid लेआउट के लिए हैं, फ्लो के लिए नहीं।

margin: 0 auto; और margin: auto; दोनों ब्लॉक एलिमेंट को क्षैतिज रूप से केंद्रित करते हैं, लेकिन लंबवत नहीं।

11. 

लेआउट: इकाइयाँ

निम्नलिखित HTML में <a> लिंक के टेक्स्ट का पिक्सेल आकार क्या है?

<body style="font-size: 40px !important;">
  <nav style="font-size: 50%;">
    <a style="font-size: 25%;">HOME</a>
  </nav>
</body>

<a> के लिए font-size 5px निकलता है: 40px (body) * 50% (nav) = 20px, फिर 20px * 25% = 5px.

12. 

इकाइयाँ: REM

निम्न HTML में “HOME” लिंक के लिए 1.2rem का पिक्सेल आकार क्या होगा?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2rem;">HOME</a>
  </body>
</html>

1.2rem 12px में बदल जाता है क्योंकि rem इकाइयाँ रूट या <html> फ़ॉन्ट आकार को संदर्भित करती हैं, जो यहाँ 10px पर सेट है।

13. 

इकाइयाँ: EM

पिछले प्रश्न की तरह, नीचे दिए गए HTML में “HOME” लिंक के लिए 1.2em का पिक्सेल आकार क्या होगा?

<html style="font-size: 10px;">
  <body style="font-size: 20px;">
    <a style="font-size: 1.2em;">HOME</a>
  </body>
</html>

1.2em 24px में बदलता है क्योंकि em इकाइयाँ विरासत में मिली फ़ॉन्ट आकार को संदर्भित करती हैं, जो यहाँ 20px पर सेट है।

14. 

चयनकर्ता: विशिष्टता

कौन सा चयनकर्ता सबसे कम विशिष्टता रखता है?

:where(.card) .title सबसे कम विशिष्टता रखता है। :where() प्स्यूडो‑क्लास और उसके अंदर सब कुछ 0-0-0 योगदान देता है, इसलिए केवल .title गिना जाता है। :is(.card) .title .card की विशिष्टता रखता है, .card .title में दो क्लास हैं, और #card .title में एक ID शामिल है।

Loading comments...