ID स्टाइलिंग के साथ Divs बनाना | आईडी क्यों महत्वपूर्ण है

ID स्टाइलिंग के साथ Divs बनाना - संपूर्ण गाइड

ID स्टाइलिंग के साथ Divs बनाना

आईडी (ID) एक यूनिक पहचानकर्ता है जो HTML एलिमेंट्स को दिया जाता है। CSS में # सिंबल के साथ इसका उपयोग करके हम विशिष्ट रूप से उस एलिमेंट को स्टाइल कर सकते हैं।

आईडी क्यों महत्वपूर्ण है?

  • यूनिक स्टाइलिंग: किसी विशेष एलिमेंट को अलग स्टाइल देने के लिए
  • JavaScript एक्सेस: DOM में एलिमेंट को टारगेट करने के लिए
  • इंटरनल लिंकिंग: पेज के विशेष सेक्शन पर लिंक करने के लिए
  • फॉर्म एलिमेंट्स: फॉर्म इनपुट्स को लेबल से जोड़ने के लिए

महत्वपूर्ण: एक HTML पेज पर प्रत्येक ID यूनिक होनी चाहिए। एक ही ID को कई एलिमेंट्स पर न दें।

प्रैक्टिकल उदाहरण

मुख्य कंटेंट एरिया

यह मुख्य कंटेंट वाला डिव है जिसे #main-content ID दी गई है। यह पेज का सबसे महत्वपूर्ण सेक्शन है।

HTML कोड

<div id="header">
    <h2>वेबसाइट हेडर</h2>
    <p>इस डिव को #header ID दी गई है</p>
</div>

<div id="main-content">
    <h3>मुख्य कंटेंट एरिया</h3>
    <p>मुख्य कंटेंट वाला डिव</p>
    
    <div id="sidebar">
        <h4>साइडबार</h4>
        <p>नेस्टेड डिव जिसे #sidebar ID दी गई है</p>
    </div>
</div>

<div id="footer">
    <p>कॉपीराइट © 2023 - फुटर सेक्शन</p>
</div>

CSS कोड

/* हेडर स्टाइल */
#header {
    background-color: #3498db;
    color: white;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
}

/* मुख्य कंटेंट स्टाइल */
#main-content {
    background-color: white;
    padding: 25px;
    border: 2px solid #3498db;
    border-radius: 8px;
    margin: 20px 0;
}

/* साइडबार स्टाइल */
#sidebar {
    background-color: #e8f4fc;
    padding: 20px;
    border-radius: 8px;
    margin-top: 15px;
}

/* फुटर स्टाइल */
#footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: 30px;
    border-radius: 8px;
}

बेस्ट प्रैक्टिसेस

ID और Class में अंतर:

  • ID यूनिक होती है (एक पेज पर एक बार)
  • Class को कई एलिमेंट्स पर प्रयोग किया जा सकता है
  • CSS में ID को # से और Class को . से सिलेक्ट करते हैं
  • सिमेंटिक नाम: ID के लिए सार्थक नाम चुनें (जैसे #main-nav, #contact-form)
  • ओवरयूज न करें: सिर्फ उन्हीं एलिमेंट्स को ID दें जिन्हें विशेष रूप से टारगेट करना हो
  • CSS Specificity: ID सिलेक्टर्स की स्पेसिफिसिटी ज्यादा होती है, इसलिए सावधानी से प्रयोग करें

सामान्य गलतियाँ

  • एक ही ID को कई एलिमेंट्स पर देना
  • ID नाम में स्पेस या स्पेशल कैरेक्टर का प्रयोग (केवल हाइफन और अंडरस्कोर प्रयोग करें)
  • ID के नाम संख्या से शुरू करना
  • बहुत ज्यादा ID का प्रयोग करना (जहाँ Class बेहतर हो)

उन्नत तकनीकें

CSS में ID सिलेक्टर्स को कॉम्बिन करना

/* ID और एलिमेंट कॉम्बिनेशन */
div#main-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* ID और Class कॉम्बिनेशन */
#sidebar.featured {
    border: 2px solid #27ae60;
}

/* ID के साथ प्स्यूडो-क्लास */
#header:hover {
    opacity: 0.9;
}

JavaScript में ID का प्रयोग

// ID के द्वारा एलिमेंट को सिलेक्ट करना
const header = document.getElementById('header');

// ID वाले एलिमेंट को मॉडिफाई करना
header.style.backgroundColor = '#e74c3c';
और नया पुराने