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

परिचय

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

CSS की परिभाषा (Definition of CSS)

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

CSS का उपयोग क्यों किया जाता है?

वेब पेज का डिज़ाइन सुधारने के लिए - CSS का उपयोग वेब पेज के रंग, फॉन्ट, बैकग्राउंड, और लेआउट को बेहतर बनाने के लिए किया जाता है।
HTML और स्टाइल को अलग करने के लिए - CSS वेब डिज़ाइन को अधिक व्यवस्थित और मैनेज करने योग्य बनाता है।
फास्ट लोडिंग और परफॉर्मेंस सुधारने के लिए - CSS कोड अलग फाइल में होने से वेब पेज तेजी से लोड होता है।
रिस्पॉन्सिव वेब डिज़ाइन - CSS का उपयोग वेब पेज को विभिन्न डिवाइसेस (मोबाइल, टैबलेट, डेस्कटॉप) पर अनुकूल बनाने के लिए किया जाता है।

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

CSS को तीन अलग-अलग तरीकों से वेब पेज में लागू किया जा सकता है:

CSS प्रकार विवरण उदाहरण

Inline CSS CSS को HTML एलिमेंट के अंदर style एट्रिब्यूट के माध्यम से लागू किया जाता है। <p style="color: red;">यह लाल रंग का टेक्स्ट है।</p>

Internal CSS

CSS प्रकार	विवरण	उदाहरण
Inline CSS	CSS को HTML एलिमेंट के अंदर `style` एट्रिब्यूट के माध्यम से लागू किया जाता है।	`<p style="color: red;">यह लाल रंग का टेक्स्ट है।</p>`
Internal CSS	CSS को `<style>` टैग के अंदर `<head>` सेक्शन में लिखा जाता है।	`<style> p { color: blue; } </style>`
External CSS	CSS को अलग .css फाइल में लिखा जाता है और `<link>` टैग के माध्यम से HTML में जोड़ा जाता है।	`/* style.css */ p { color: green; }` HTML: `<link rel="stylesheet" href="style.css">`

CSS को <style> टैग के अंदर <head> सेक्शन में लिखा जाता है।


<style>
    p {
        color: blue;
    }
</style>

External CSS

CSS को अलग .css फाइल में लिखा जाता है और <link> टैग के माध्यम से HTML में जोड़ा जाता है।


/* style.css */
p {
    color: green;
}

HTML:


<link rel="stylesheet" href="style.css">

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

CSS का सिंटैक्स तीन मुख्य भागों में विभाजित होता है:


selector {
    property: value;
}

Selector: यह HTML एलिमेंट को चुनता है जिसे स्टाइल देना है।
Property: यह CSS का गुण (जैसे color, font-size) होता है।
Value: यह उस गुण का मान (जैसे red, 20px) होता है।

CSS सिंटैक्स का उदाहरण


p {
    color: blue;
    font-size: 16px;
}

CSS के प्रमुख गुण (Important CSS Properties)

CSS प्रॉपर्टी	विवरण	उदाहरण
color	टेक्स्ट का रंग सेट करता है।	`color: red;`
font-size	फॉन्ट का आकार सेट करता है।	`font-size: 20px;`
background-color	बैकग्राउंड का रंग सेट करता है।	`background-color: yellow;`
margin	बाहर की दूरी सेट करता है।	`margin: 10px;`
padding	अंदर की दूरी सेट करता है।	`padding: 10px;`
border	सीमा सेट करता है।	`border: 1px solid black;`

CSS में Selectors क्या होते हैं?

CSS में Selectors का उपयोग HTML एलिमेंट्स को स्टाइल देने के लिए किया जाता है।

मुख्य CSS Selectors

Selector	विवरण	उदाहरण
Element Selector	HTML टैग को टार्गेट करता है।	`p { color: blue; }`
ID Selector	एक विशिष्ट ID वाले एलिमेंट को स्टाइल करता है।	`#myId { color: red; }`
Class Selector	एक विशेष वर्ग (class) वाले एलिमेंट्स को स्टाइल करता है।	`.myClass { color: green; }`
Group Selector	एक से अधिक एलिमेंट्स को एक साथ स्टाइल करता है।	`h1, p { color: black; }`
Universal Selector	सभी एलिमेंट्स को टार्गेट करता है।	`* { margin: 0; padding: 0; }`

CSS के लाभ (Advantages of CSS)

वेब पेज को आकर्षक बनाता है।
HTML और स्टाइलिंग को अलग करता है, जिससे कोड साफ और व्यवस्थित रहता है।
वेब पेज लोडिंग स्पीड को तेज करता है।
रिस्पॉन्सिव डिज़ाइन को आसान बनाता है।
एक ही CSS फाइल से कई वेब पेजों को स्टाइल किया जा सकता है।

निष्कर्ष

CSS वेब डिज़ाइन में एक महत्वपूर्ण भूमिका निभाता है। यह HTML को अधिक सुंदर और उपयोगकर्ता-अनुकूल बनाता है। वेब डेवलपर्स के लिए CSS सीखना अनिवार्य है, क्योंकि यह वेब पेजों को इंटरएक्टिव और आधुनिक बनाने में मदद करता है।