CSS Syntax – CSS का सिंटैक्स

CSS (Cascading Style Sheets) का सिंटैक्स बहुत सरल और सीधा है। यह HTML एलिमेंट्स को स्टाइल करने के लिए इस्तेमाल किया जाता है। CSS में, आप एलिमेंट्स को चुनते हैं और उन पर विभिन्न स्टाइलिंग प्रॉपर्टीज़ लागू करते हैं। इस चैप्टर में, हम CSS सिंटैक्स को विस्तार से समझेंगे, जिसमें Selector, Property, और Value की भूमिका शामिल है।

CSS Syntax क्या है?

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

Selector (चयनकर्ता): यह तय करता है कि कौन से HTML एलिमेंट पर स्टाइल लागू होगा।
Property (गुण): यह तय करता है कि HTML एलिमेंट में क्या बदला जाना चाहिए, जैसे रंग, फॉन्ट या आकार।
Value (मूल्य): यह प्रॉपर्टी के लिए दी गई मान (value) को परिभाषित करता है।

सामान्य CSS सिंटैक्स:

selector {
    property: value;
}

उदाहरण

1. सिंपल CSS:

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

इस कोड में:

Selector: h1 (यह HTML के <h1> एलिमेंट को चुनता है)।
Property: color, font-size।
Value: blue, 24px।

यह CSS कोड <h1> टेक्स्ट का रंग नीला और उसका फॉन्ट साइज 24px कर देगा।

CSS Ruleset

CSS का एक Ruleset वह कोड ब्लॉक है जिसमें Selector और उस पर लागू स्टाइल्स (प्रॉपर्टीज़ और वैल्यूज़) होते हैं।
उदाहरण:

p {
    text-align: center;
    color: red;
}

Selector: p (यह पैराग्राफ एलिमेंट को चुनता है)।
Declaration Block: { text-align: center; color: red; }
Declarations:
- text-align: center;
- color: red;
Properties: text-align, color।
Values: center, red।

CSS Declaration

एक CSS Declaration में प्रॉपर्टी और वैल्यू होती है। दोनों को कॉलन (:) द्वारा अलग किया जाता है और इसे सेमीकोलन (;) द्वारा समाप्त किया जाता है।

उदाहरण:

color: green;
font-size: 20px;

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

CSS को तीन तरीकों से HTML डॉक्यूमेंट में लागू किया जा सकता है:

Inline CSS: HTML एलिमेंट के अंदर style ऐट्रिब्यूट का उपयोग।
Internal CSS: HTML फाइल में <style> टैग का उपयोग।
External CSS: एक अलग .css फाइल का उपयोग।

1. Inline CSS

परिभाषा:
CSS को सीधे HTML एलिमेंट के style ऐट्रिब्यूट के अंदर लिखा जाता है।

उदाहरण:

<p style="color: blue; text-align: center;">यह एक Inline CSS का उदाहरण है।</p>

फायदे:

छोटे बदलावों के लिए सरल।
नुकसान:
कोड का पुनः उपयोग (reuse) संभव नहीं।
कोड पढ़ने और मैनेज करने में कठिनाई।

2. Internal CSS

परिभाषा:
HTML डॉक्यूमेंट के <head> सेक्शन में <style> टैग के अंदर CSS लिखा जाता है।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <p>यह एक Internal CSS का उदाहरण है।</p>
</body>
</html>

फायदे:

पूरी फाइल के लिए CSS लागू करना आसान।
नुकसान:
कोड का पुनः उपयोग अन्य HTML फाइलों में संभव नहीं।

3. External CSS

परिभाषा:
CSS को एक अलग .css फाइल में लिखा जाता है और HTML डॉक्यूमेंट से जोड़ा जाता है।

उदाहरण:

style.css:

p {
    color: red;
    text-align: center;
}

HTML फाइल:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>यह एक External CSS का उदाहरण है।</p>
</body>
</html>

फायदे:

कोड का पुनः उपयोग।
HTML और CSS को अलग रखना।
वेबसाइट की गति बढ़ती है।
नुकसान:
इंटरनेट कनेक्शन न होने पर स्टाइल लोड नहीं होगी।

CSS Comments (टिप्पणियाँ)

CSS में कमेंट्स का उपयोग कोड को समझाने या भविष्य में कोड को पढ़ने में सहायता के लिए किया जाता है।
सिंटैक्स:

/* यह एक CSS कमेंट है */

उदाहरण:

p {
    color: black; /* टेक्स्ट का रंग काला होगा */
    font-size: 16px; /* टेक्स्ट का साइज 16px होगा */
}

कमेंट्स को ब्राउज़र इग्नोर करता है और यह कोड पर कोई प्रभाव नहीं डालते।

Multiple Selectors (मल्टीपल सेलेक्टर्स)

CSS में, आप एक ही स्टाइल को कई एलिमेंट्स पर लागू कर सकते हैं।

उदाहरण:

h1, h2, p {
    color: purple;
}

यह कोड <h1>, <h2>, और <p> सभी का रंग पर्पल कर देगा।

Default Browser Styles

यदि आप CSS का उपयोग नहीं करते हैं, तो ब्राउज़र HTML एलिमेंट्स को डिफ़ॉल्ट स्टाइल (Default Styles) देता है। उदाहरण के लिए, <h1> बड़ा और बोल्ड होता है, जबकि <p> सामान्य टेक्स्ट होता है।

CSS का उपयोग करके आप इन डिफ़ॉल्ट स्टाइल्स को ओवरराइड कर सकते हैं।

CSS में Case Sensitivity

CSS में प्रॉपर्टीज़ और वैल्यूज़ case-sensitive नहीं होतीं।
उदाहरण:

COLOR: red; /* मान्य */
color: red; /* मान्य */

हालांकि, HTML के class और id case-sensitive होते हैं।

निष्कर्ष

CSS सिंटैक्स को समझना CSS सीखने की दिशा में पहला कदम है। यह आपको HTML एलिमेंट्स पर स्टाइल लागू करने और उन्हें आकर्षक बनाने में मदद करता है। इस चैप्टर में आपने CSS Ruleset, Declarations, और विभिन्न प्रकार के CSS का उपयोग करना सीखा।