HTML में स्टाइल शीट का उपयोग कैसे करें?

परिचय

स्टाइलशीट का उपयोग HTML में यह वर्णन करने के लिए किया जाता है कि दस्तावेज़ स्क्रीन पर कैसे प्रस्तुत किया जाता है। CSS के साथ, आसानी से एक HTML एलिमेंट के लिए कई स्टाइल प्रॉपर्टीज निर्दिष्ट करें। प्रत्येक प्रॉपर्टी का एक नाम और एक मान होता है, जो कोलन (:) से अलग होता है।

CSS उपयोग करने के तीन तरीके

• एक्सटर्नल स्टाइल शीट - स्टाइल शीट नियमों को एक अलग .css फाइल में परिभाषित करें और फिर HTML <link> टैग का उपयोग करके उस फाइल को अपने HTML दस्तावेज़ में शामिल करें
• इंटरनल स्टाइल शीट - HTML दस्तावेज़ के हेडर सेक्शन में <style> टैग का उपयोग करके स्टाइल शीट नियमों को परिभाषित करें
• इंलाइन स्टाइल शीट - style एट्रिब्यूट का उपयोग करके HTML एलिमेंट्स के साथ सीधे स्टाइल शीट नियमों को परिभाषित करें

महत्वपूर्ण नोट

प्रत्येक प्रॉपर्टी घोषणा सेमीकोलन (;) से अलग होती है। HTML एलिमेंट्स और एट्रिब्यूट्स में CSS जोड़ने के लिए style एट्रिब्यूट का उपयोग करें। यह है कि आप इंलाइन स्टाइल शीट कैसे जोड़ सकते हैं और टेक्स्ट कलर सेट कर सकते हैं।

उदाहरण: इंलाइन स्टाइल

<!DOCTYPE html> <html> 
    <head> 
        <title>HTML style sheet</title> 
    </head> 
    <body> 
        <h1 style="color:red"> 
            हेडिंग 
        </h1> 
        <p style="color:blue"> 
            यह डेमो टेक्स्ट है 
        </p> 
    </body> 
</html>

आउटपुट

तीनों तरीकों का पूर्ण उदाहरण

1. एक्सटर्नल स्टाइल शीट (styles.css)

/* styles.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; }
.highlight { background: #fff3cd; padding: 10px; border-radius: 4px; }
.btn { background: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; }
.btn:hover { background: #2980b9; }

2. HTML में लिंक करना

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <title>एक्सटर्नल CSS उदाहरण</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>एक्सटर्नल स्टाइलशीट</h1>
    <p class="highlight">यह हाइलाइटेड पैराग्राफ है</p>
    <button class="btn">बटन</button>
</body>
</html>

3. इंटरनल स्टाइल शीट

<!DOCTYPE html>
<html lang="hi">
<head>
    <meta charset="UTF-8">
    <title>इंटरनल CSS उदाहरण</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .card { border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin: 10px 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
        .primary { border-left: 4px solid #3498db; }
        .success { border-left: 4px solid #27ae60; }
    </style>
</head>
<body>
    <h1>इंटरनल स्टाइलशीट</h1>
    <div class="card primary"><h3>प्राथमिक कार्ड</h3><p>कंटेंट</p></div>
    <div class="card success"><h3>सफलता कार्ड</h3><p>कंटेंट</p></div>
</body>
</html>

4. इंलाइन स्टाइल (सीमित उपयोग)

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; text-align: center;">
    <h2>ग्रेडिएंट बैनर</h2>
    <p>केवल विशिष्ट, एकबारगी स्टाइल्स के लिए</p>
</div>

तुलना और अनुशंसाएँ

CSS विशिष्टता (Specificity)

इंलाइन स्टाइल (1000) > ID सेलेक्टर (100) > क्लास/एट्रिब्यूट/प्सूडो-क्लास (10) > एलिमेंट/प्सूडो-एलिमेंट (1)

आधुनिक सर्वोत्तम अभ्यास

1. एक्सटर्नल स्टाइलशीट्स प्राथमिकता दें - कैशिंग और रखरखाव के लिए
2. क्रिटिकल CSS इंलाइन करें - ऊपर-द-फोल्ड कंटेंट के लिए
3. CSS कस्टम प्रॉपर्टीज (वेरिएबल्स) उपयोग करें - :root { --primary: #3498db; }
4. मोबाइल-फर्स्ट मीडिया क्वेरीज़ - @media (min-width: 768px)
5. CSS लेयर्स (@layer) उपयोग करें - विशिष्टता प्रबंधन के लिए (नया)
6. प्रीप्रोसेसर्स (Sass, Less) या पोस्टCSS - विकास दक्षता के लिए

प्रदर्शन टिप्स

• CSS मिनिफाई करें (उत्पादन में)
• अनउपयोग CSS हटाएं (PurgeCSS, uncss)
• preload या prefetch का उपयोग करें क्रिटिकल CSS के लिए
• मीडिया क्वेरीज़ के साथ कंडीशनल लोडिंग: <link media="print" href="print.css">