CSS पूरी गाइड - Complete CSS Guide in Hindi

CSS और उसके प्रकार

कैस्केडिंग स्टाइल शीट्स (CSS) की संपूर्ण जानकारी हिंदी में

CSS क्या है? (What is CSS?)

CSS (Cascading Style Sheets) एक स्टाइल शीट भाषा है जिसका उपयोग HTML दस्तावेज़ों को स्टाइल करने के लिए किया जाता है। CSS आपको वेब पेज के लुक और लेआउट को नियंत्रित करने की अनुमति देता है।

CSS के मुख्य उद्देश्य:

HTML तत्वों को स्टाइल करना
वेब पेज का लेआउट डिज़ाइन करना
रिस्पॉन्सिव डिज़ाइन बनाना
एनिमेशन और ट्रांजिशन जोड़ना

CSS सिंटैक्स (Syntax)

selector {
  property: value;
  property: value;
}

उदाहरण:

h1 {
  color: blue;
  font-size: 24px;
}

CSS सिलेक्टर्स (Selectors)

CSS सिलेक्टर्स आपको HTML तत्वों को टारगेट करने की अनुमति देते हैं जिन्हें आप स्टाइल करना चाहते हैं।

सिलेक्टर	उदाहरण	विवरण
एलिमेंट सिलेक्टर	`p`	सभी <p> तत्वों को सिलेक्ट करता है
आईडी सिलेक्टर	`#header`	id="header" वाले तत्व को सिलेक्ट करता है
क्लास सिलेक्टर	`.menu`	class="menu" वाले सभी तत्वों को सिलेक्ट करता है
यूनिवर्सल सिलेक्टर	`*`	सभी तत्वों को सिलेक्ट करता है
ग्रुपिंग सिलेक्टर	`h1, h2, h3`	एक साथ कई तत्वों को सिलेक्ट करता है

टिप: CSS3 में नए सिलेक्टर्स जैसे :nth-child(), :hover, ::before आदि भी उपलब्ध हैं।

CSS के प्रकार (Types of CSS)

CSS को तीन मुख्य प्रकारों में बांटा गया है, जो HTML दस्तावेज़ में स्टाइल को लागू करने के अलग-अलग तरीके प्रदान करते हैं:

1. Inline CSS: CSS को सीधे HTML टैग में style एट्रिब्यूट के रूप में लिखा जाता है।
2. Internal CSS: HTML डॉक्यूमेंट के <head> टैग में <style> टैग के अंदर CSS लिखी जाती है।
3. External CSS: CSS को अलग .css फाइल में लिखा जाता है और <link> टैग से HTML में जोड़ा जाता है।

उदाहरण:

<!-- Inline CSS -->
<h1 style="color: red;">Hello</h1>

<!-- Internal CSS -->
<style>
  h1 {
    color: green;
  }
</style>

<!-- External CSS -->
<link rel="stylesheet" href="style.css">

टिप: बड़ी और प्रोफेशनल वेबसाइट्स में External CSS का उपयोग करना सबसे बेहतर माना जाता है क्योंकि इससे कोड साफ और मेंटेन करना आसान होता है।

CSS बॉक्स मॉडल (Box Model)

CSS में हर तत्व एक बॉक्स है जिसमें निम्न भाग होते हैं:

Content: वास्तविक कंटेंट (टेक्स्ट, इमेज आदि)
Padding: कंटेंट और बॉर्डर के बीच की जगह
Border: पैडिंग के चारों ओर की रेखा
Margin: बॉर्डर के बाहर की जगह

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

नोट: CSS3 में box-sizing: border-box प्रॉपर्टी का उपयोग करके आप पैडिंग और बॉर्डर को तत्व की चौड़ाई में शामिल कर सकते हैं।

CSS लेआउट तकनीकें (Layout Techniques)

1. फ्लोट (Float)

पुरानी लेआउट तकनीक जिसमें तत्वों को बाएँ या दाएँ फ्लोट किया जाता है।

.left {
  float: left;
  width: 50%;
}

2. फ्लेक्सबॉक्स (Flexbox)

एक आधुनिक लेआउट मॉडल जो रिस्पॉन्सिव डिज़ाइन के लिए उपयुक्त है।

.container {
  display: flex;
  justify-content: space-between;
}

3. ग्रिड (Grid)

द्वि-आयामी लेआउट सिस्टम जो कॉलम और रो दोनों को नियंत्रित करता है।

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

टिप: नए प्रोजेक्ट्स के लिए फ्लेक्सबॉक्स और ग्रिड का उपयोग करें, फ्लोट का नहीं।

रिस्पॉन्सिव डिज़ाइन (Responsive Design)

रिस्पॉन्सिव डिज़ाइन तकनीकें जो वेबसाइट को सभी डिवाइस पर अच्छी तरह दिखने देती हैं।

1. व्यूपोर्ट मेटा टैग (Viewport Meta Tag)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. मीडिया क्वेरीज़ (Media Queries)

@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

3. फ्लेक्सिबल ग्रिड (Flexible Grid)

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

एनिमेशन और ट्रांजिशन (Animations & Transitions)

1. ट्रांजिशन (Transitions)

CSS प्रॉपर्टी में धीरे-धीरे परिवर्तन करता है।

.button {
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: blue;
}

2. एनिमेशन (Animations)

कीफ्रेम्स का उपयोग करके जटिल एनिमेशन बनाता है।

@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

.box {
  animation: slide 2s infinite;
}

CSS बेस्ट प्रैक्टिसेज़ (Best Practices)

एक्सटर्नल स्टाइल शीट का उपयोग करें
सेमेंटिक क्लास नेम्स का प्रयोग करें
CSS को मिनिफाई करें (production के लिए)
CSS प्रीप्रोसेसर (SASS/LESS) का उपयोग करें
CSS वेरिएबल्स (कस्टम प्रॉपर्टीज़) का उपयोग करें
ब्राउज़र कंपैटिबिलिटी का ध्यान रखें

CSS वेरिएबल्स उदाहरण:

:root {
  --primary-color: #3498db;
  --padding: 15px;
}

.button {
  background-color: var(--primary-color);
  padding: var(--padding);
}

CSS फ्रेमवर्क्स (Frameworks)

फ्रेमवर्क	विवरण
Bootstrap	सबसे लोकप्रिय CSS फ्रेमवर्क, रेडीमेड कंपोनेंट्स के साथ
Tailwind CSS	यूटिलिटी-फर्स्ट CSS फ्रेमवर्क
Foundation	एडवांस्ड रिस्पॉन्सिव फ्रेमवर्क
Bulma	मॉडर्न CSS फ्रेमवर्क जो केवल Flexbox का उपयोग करता है

निष्कर्ष (Conclusion)

CSS वेब डिज़ाइन का एक मूलभूत हिस्सा है। आधुनिक CSS तकनीकों जैसे Flexbox, Grid, CSS वेरिएबल्स और एनिमेशन का उपयोग करके आप प्रोफेशनल वेबसाइट्स बना सकते हैं।

अगले कदम: CSS के बाद JavaScript सीखें और वेब डेवलपमेंट में महारत हासिल करें!

CSS पूरी गाइड - CSS क्या है? (What is CSS?)