1. CSS क्या है?
CSS (Cascading Style Sheets) एक स्टाइल शीट भाषा है जिसका उपयोग HTML या XML दस्तावेज़ के डिज़ाइन और लेआउट को नियंत्रित करने के लिए किया जाता है। CSS का मुख्य उद्देश्य वेबसाइट के कंटेंट को स्टाइल देना, जैसे कि रंग, फ़ॉन्ट, स्पेसिंग, और लेआउट को बदलना है।
2. CSS के मुख्य उद्देश्य:
- डिज़ाइन और लेआउट: HTML कंटेंट को आकर्षक और व्यवस्थित तरीके से प्रस्तुत करना।
- रंग, फ़ॉन्ट, और मार्जिन: टेक्स्ट का रंग, आकार, और अन्य स्टाइलिंग विकल्पों को नियंत्रित करना।
- रिस्पॉन्सिव डिजाइन: विभिन्न स्क्रीन आकारों पर वेबसाइट की प्रस्तुति को अनुकूलित करना।
3. CSS के प्रकार:
- Inline CSS:
यह CSS का वह तरीका है जहाँ हम HTML के अंदर सीधे स्टाइल्स डालते हैं। यह एक HTML टैग के भीतरstyleऐट्रिब्यूट का उपयोग करके किया जाता है। उदाहरण:
<p style="color: red; font-size: 20px;">यह एक पारा है।</p>- Internal CSS:
यह CSS पेज के हेड सेक्शन में<style>टैग के भीतर रखा जाता है। उदाहरण:
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>यह एक पारा है।</p>
</body>
</html>- External CSS:
यह CSS को एक अलग फाइल में रखा जाता है और उस फाइल को HTML पेज में लिंक किया जाता है। उदाहरण:
- style.css (फाइल में CSS):
p { color: green; font-size: 16px; } - HTML पेज में लिंक:
html <head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
4. CSS सलेक्टर्स:
CSS सलेक्टर्स का उपयोग HTML तत्वों को टारगेट करने के लिए किया जाता है।
- Element Selector (टैग सलेक्टर): यह सीधे HTML टैग को टारगेट करता है।
p {
color: red;
}- ID Selector: इसे “#” के साथ उपयोग किया जाता है, और यह एक विशिष्ट ID को टारगेट करता है।
#header {
background-color: blue;
}- Class Selector: इसे “.” के साथ उपयोग किया जाता है और यह एक या अधिक HTML तत्वों के लिए एक सामान्य स्टाइल को लागू करता है।
.menu {
color: white;
}- Universal Selector: “*” सभी तत्वों को टारगेट करता है।
* {
margin: 0;
padding: 0;
}- Attribute Selector: यह HTML तत्वों के ऐट्रिब्यूट्स के आधार पर चयन करता है।
a[href^="https"] {
color: green;
}5. CSS गुण (Properties) और मान (Values):
CSS के कुछ सामान्य गुण:
- color: टेक्स्ट का रंग निर्धारित करता है।
p {
color: red;
}- background-color: तत्व की पृष्ठभूमि का रंग निर्धारित करता है।
div {
background-color: lightblue;
}- font-size: टेक्स्ट का आकार निर्धारित करता है।
h1 {
font-size: 30px;
}- margin: तत्व के बाहरी सीमाओं के बीच का स्थान निर्धारित करता है।
div {
margin: 20px;
}- padding: तत्व के भीतर के किनारों के बीच का स्थान निर्धारित करता है।
div {
padding: 15px;
}- border: तत्व के चारों ओर एक सीमा (border) बनाता है।
p {
border: 2px solid black;
}6. CSS Box Model:
CSS में हर HTML तत्व एक बॉक्स के रूप में होता है, जिसे “Box Model” कहा जाता है। बॉक्स मॉडल में निम्नलिखित हिस्से होते हैं:
- Content: मुख्य सामग्री (जैसे टेक्स्ट, इमेज, आदि)
- Padding: कंटेंट के चारों ओर का स्पेस
- Border: पैडिंग और मार्जिन के बीच की सीमा
- Margin: बॉक्स के बाहर का स्पेस
7. CSS Layouts:
- Flexbox:
Flexbox एक CSS लAYOUT मोड है जो कंटेनर के भीतर के आइटमों को व्यवस्थित करने के लिए उपयोग किया जाता है। उदाहरण:
.container {
display: flex;
justify-content: space-between;
}- Grid:
CSS Grid Layout एक शक्तिशाली 2D लेआउट प्रणाली है, जिससे हम पंक्तियों और स्तंभों में सामग्री को व्यवस्थित कर सकते हैं। उदाहरण:
.container {
display: grid;
grid-template-columns: auto auto auto;
}8. CSS Media Queries:
Media Queries का उपयोग विभिन्न स्क्रीन आकारों (जैसे मोबाइल, टैबलेट, और डेस्कटॉप) पर विभिन्न स्टाइल्स लागू करने के लिए किया जाता है।
उदाहरण:
@media screen and (max-width: 768px) {
.container {
flex-direction: column;
}
}यह कोड तब लागू होगा जब स्क्रीन की चौड़ाई 768px से कम होगी।
9. CSS Animations:
CSS Animations का उपयोग HTML तत्वों को एनिमेट करने के लिए किया जाता है। इसका उपयोग ट्रांजीशन्स, मूवमेंट्स, और अन्य इफेक्ट्स के लिए किया जाता है।
उदाहरण:
@keyframes slide {
0% { left: 0; }
100% { left: 100px; }
}
.box {
position: relative;
animation: slide 2s infinite;
}10. Conclusion:
CSS एक बहुत ही महत्वपूर्ण तकनीक है, जिसका उपयोग हम अपनी वेबसाइट को आकर्षक और पेशेवर बनाने के लिए करते हैं। यह HTML और JavaScript के साथ मिलकर काम करता है और वेब पेजों को डिज़ाइन और इंटरएक्टिव बनाता है।
