अध्याय 2: CSS की बुनियादी संरचना

अध्याय 2: CSS की बुनियादी संरचना

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

    CSS का सिंटैक्स

    CSS सिंटैक्स का परिचय

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

    CSS का मूल संरचना

    CSS का सिंटैक्स तीन मुख्य भागों से मिलकर बना होता है: सेलेक्टर (selector), गुण (property), और मान (value)।

    सेलेक्टर: सेलेक्टर HTML दस्तावेज़ में उन तत्वों को चुनता है जिन्हें आप स्टाइल करना चाहते हैं।

    गुण (Property): गुण वह विशेषता है जिसे आप HTML तत्व में बदलना चाहते हैं, जैसे कि रंग, फॉन्ट, साइज आदि।

    मान (Value): मान वह विशिष्ट मूल्य है जिसे आप गुण को देना चाहते हैं।

    उदाहरण:

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

    इस उदाहरण में:

    • h1 सेलेक्टर है, जो सभी <h1> तत्वों को चुनता है।
    • { } डिक्लेरेशन ब्लॉक है, जिसमें स्टाइल नियम होते हैं।
    • color और font-size गुण हैं।
    • blue और 24px मान हैं।

    इस प्रकार, उपरोक्त CSS नियम सभी <h1> तत्वों को नीले रंग में और 24px फॉन्ट साइज के साथ स्टाइल करता है।

    उदाहरण:

    HTML कोड:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS सिंटैक्स का परिचय</title>
<style>
h1 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है</h1>
<p>यह एक पैराग्राफ है।</p>
</body>
</html>

    See the Pen css chapter 2 by arun geek (@arun-geek) on CodePen.

    इस उदाहरण में:

    • <h1> तत्व को नीले रंग और 24px फॉन्ट साइज के साथ स्टाइल किया गया है।
    • <p> तत्व को हरे रंग और 16px फॉन्ट साइज के साथ स्टाइल किया गया है।

    स्टाइल नियमों का संरचना

    CSS का उपयोग करते समय, आपको स्टाइल नियमों की संरचना को समझना बहुत महत्वपूर्ण है। एक CSS स्टाइल नियम तीन मुख्य घटकों से मिलकर बना होता है: सेलेक्टर (Selector), गुण (Property), और मान (Value)। आइए इन तीन घटकों को विस्तार से समझें।

    सेलेक्टर (Selector)

    सेलेक्टर उस HTML तत्व को चुनता है जिसे आप स्टाइल करना चाहते हैं। यह बताता है कि CSS का कौन सा नियम किस HTML तत्व पर लागू होगा। सेलेक्टर्स विभिन्न प्रकार के होते हैं, जैसे तत्व सेलेक्टर, क्लास सेलेक्टर, आईडी सेलेक्टर, आदि।

    उदाहरण:

    h1 {
color: blue;
}

    इस उदाहरण में, h1 सेलेक्टर सभी <h1> तत्वों को चुनता है।

    गुण (Property)

    गुण वह विशेषता है जिसे आप HTML तत्व में बदलना चाहते हैं। यह बताता है कि आप उस तत्व के किस हिस्से को स्टाइल करना चाहते हैं, जैसे रंग, फॉन्ट, साइज, बैकग्राउंड, आदि। प्रत्येक गुण का एक विशिष्ट नाम होता है।

    उदाहरण:

    h1 {
color: blue;
}

    इस उदाहरण में, color गुण है, जो टेक्स्ट का रंग निर्दिष्ट करता है।

    मान (Value)

    मान वह विशिष्ट मूल्य है जिसे आप गुण को देना चाहते हैं। यह बताता है कि आप उस गुण को क्या मान देना चाहते हैं, जैसे blue रंग, 16px फॉन्ट साइज, आदि। प्रत्येक गुण का एक या अधिक मान हो सकते हैं।

    उदाहरण:

    h1 {
color: blue;
}

    इस उदाहरण में, blue मान है, जो color गुण को दिया गया है।

    CSS नियम का उदाहरण

    आइए, एक पूर्ण CSS नियम को देखें जिसमें सेलेक्टर, गुण, और मान सभी शामिल हों।

    p {
color: green;
font-size: 16px;
background-color: yellow;
}

    इस उदाहरण में:

    • p सेलेक्टर है, जो सभी <p> तत्वों को चुनता है।
    • color गुण है, जो टेक्स्ट का रंग निर्दिष्ट करता है।
    • green उस गुण का मान है, जो टेक्स्ट को हरा रंग देता है।
    • font-size गुण है, जो टेक्स्ट का आकार निर्दिष्ट करता है।
    • 16px उस गुण का मान है, जो फॉन्ट का आकार 16 पिक्सल करता है।
    • background-color गुण है, जो पृष्ठभूमि का रंग निर्दिष्ट करता है।
    • yellow उस गुण का मान है, जो पृष्ठभूमि को पीला रंग देता है।

    HTML कोड:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS नियम का उदाहरण</title>
<style>
p {
color: green;
font-size: 16px;
background-color: yellow;
}
</style>
</head>
<body>
<p>यह एक उदाहरण पैराग्राफ है।</p>
</body>
</html>

    See the Pen Untitled by arun geek (@arun-geek) on CodePen.

    इस उदाहरण में, <p> तत्व(tag) को हरे रंग, 16px फॉन्ट साइज, और पीले पृष्ठभूमि रंग के साथ स्टाइल किया गया है।

    CSS कैसे काम करता है?

    CSS (Cascading Style Sheets) वेब पेजों की शैली और लेआउट को नियंत्रित करने का एक शक्तिशाली उपकरण है। यह जानना महत्वपूर्ण है कि CSS ब्राउज़र में कैसे काम करता है और इसे सही ढंग से कैसे उपयोग किया जाए। इस सेक्शन में हम जानेंगे कि ब्राउज़र CSS को कैसे पढ़ता और लागू करता है, प्राथमिकता (Specificity), कैस्केडिंग और विरासत (Inheritance) के सिद्धांतों के बारे में, और CSS का प्रभावी उपयोग कैसे करें।

    ब्राउज़र का CSS को पढ़ना और लागू करना

    जब ब्राउज़र एक वेब पेज लोड करता है, तो यह HTML और CSS फाइलों को पढ़ता है और DOM (Document Object Model) का निर्माण करता है। ब्राउज़र HTML तत्वों को पढ़ता है और CSS नियमों को लागू करता है ताकि वेब पेज को स्टाइल किया जा सके। यह प्रक्रिया निम्नलिखित चरणों में होती है:

    1. HTML Parsing: ब्राउज़र HTML दस्तावेज़ को पढ़ता है और DOM का निर्माण करता है।
    2. CSS Parsing: ब्राउज़र CSS फाइलों को पढ़ता है और CSSOM (CSS Object Model) का निर्माण करता है।
    3. Rendering: ब्राउज़र DOM और CSSOM को मिलाकर रेंडर ट्री बनाता है, जो वेब पेज के स्टाइल और लेआउट को निर्धारित करता है।
    4. Painting: अंत में, ब्राउज़र वेब पेज को स्क्रीन पर पेंट करता है।

    प्राथमिकता (Specificity)

    CSS प्राथमिकता (Specificity) का उपयोग यह निर्धारित करने के लिए किया जाता है कि कौन से CSS नियम एक HTML तत्व पर लागू होंगे यदि कई नियम एक ही तत्व पर लागू होते हैं। प्राथमिकता की गणना निम्नलिखित तरीके से की जाती है:

    1. इनलाइन स्टाइल्स: सबसे अधिक प्राथमिकता होती है। उदाहरण: <div style="color: red;">
    2. आईडी सेलेक्टर्स: दूसरे स्थान पर होते हैं। उदाहरण: #header
    3. क्लास, एट्रिब्यूट, और स्यूडो-क्लास सेलेक्टर्स: तीसरे स्थान पर होते हैं। उदाहरण: .container, [type="text"], :hover
    4. तत्व और स्यूडो-एलिमेंट सेलेक्टर्स: सबसे कम प्राथमिकता होती है। उदाहरण: div, p, ::before

    उदाहरण:

    /* प्राथमिकता क्रम */
#header {
color: blue; /* अधिक प्राथमिकता */
}
.container {
color: green; /* कम प्राथमिकता */
}
div {
color: red; /* सबसे कम प्राथमिकता */
}

    कैस्केडिंग और विरासत (Inheritance)

    कैस्केडिंग (Cascading): CSS का पूरा नाम “Cascading Style Sheets” है, जो दर्शाता है कि स्टाइल्स कैस्केड होते हैं, यानी एक के बाद एक लागू होते हैं। यदि कई नियम एक ही तत्व पर लागू होते हैं, तो अंतिम नियम लागू होगा, बशर्ते उसकी प्राथमिकता समान हो।

    विरासत (Inheritance): कुछ CSS गुण स्वाभाविक रूप से अपने पैरेंट तत्वों से विरासत में मिलते हैं। उदाहरण के लिए, color, font-family, आदि। अन्य गुण, जैसे कि margin, padding, विरासत में नहीं मिलते।

    उदाहरण:

    body {
font-family: Arial, sans-serif; /* विरासत में मिलेगा */
color: blue; /* विरासत में मिलेगा */
}
p {
margin: 20px; /* विरासत में नहीं मिलेगा */
}

    CSS का प्रभावी उपयोग

    1. सुसंगतता बनाए रखें: सभी पेजों पर एक समान स्टाइल लागू करने के लिए एक्सटर्नल CSS फाइल का उपयोग करें।
    2. क्लास और आईडी का सही उपयोग: HTML एलिमेंट्स को टारगेट करने के लिए क्लास और आईडी का सही उपयोग करें।
    3. प्राथमिकता का ध्यान रखें: प्राथमिकता की समझ रखें और उसे ध्यान में रखते हुए CSS लिखें।
    4. कमेंट्स का उपयोग करें: कोड को समझने और प्रबंधित करने में आसानी के लिए कमेंट्स का उपयोग करें।
    5. पुन: उपयोग: स्टाइल नियमों को पुन: उपयोग करने के लिए क्लासेस का उपयोग करें।
    6. रिस्पॉन्सिव डिजाइन: विभिन्न डिवाइसों पर सही ढंग से काम करने के लिए मीडिया क्वेरीज का उपयोग करें।

    FAQs

    CSS का सिंटैक्स क्या है?

    CSS का सिंटैक्स एक संरचना है जिसमें सेलेक्टर, गुण (property), और मान (value) होते हैं। यह HTML तत्वों को स्टाइल करने के लिए उपयोग किया जाता है। इसका मूल सिंटैक्स है:

    selector {
    property: value;
    }

    CSS का सेलेक्टर क्या होता है?

    सेलेक्टर वह हिस्सा होता है जो HTML दस्तावेज़ में उन तत्वों को चुनता है जिन्हें आप स्टाइल करना चाहते हैं। उदाहरण के लिए, p सेलेक्टर सभी <p> तत्वों को चुनता है।

    गुण (Property) और मान (Value) क्या हैं?

    गुण (property) वह विशेषता है जिसे आप HTML तत्व में बदलना चाहते हैं, जैसे रंग, फॉन्ट, साइज आदि। मान (value) वह विशिष्ट मूल्य है जिसे आप गुण को देना चाहते हैं, जैसे color: blue; में blue।

    ब्राउज़र CSS को कैसे पढ़ता और लागू करता है?

    ब्राउज़र HTML और CSS फाइलों को पढ़ता है और DOM (Document Object Model) का निर्माण करता है। फिर ब्राउज़र CSSOM (CSS Object Model) का निर्माण करता है और इसे DOM के साथ मिलाकर रेंडर ट्री बनाता है, जो वेब पेज के स्टाइल और लेआउट को निर्धारित करता है।

    प्राथमिकता (Specificity) क्या है और यह कैसे काम करती है?

    प्राथमिकता (Specificity) CSS में यह निर्धारित करती है कि कौन से स्टाइल नियम एक HTML तत्व पर लागू होंगे यदि कई नियम एक ही तत्व पर लागू होते हैं। प्राथमिकता की गणना सेलेक्टर के प्रकारों के आधार पर की जाती है: इनलाइन स्टाइल्स, आईडी सेलेक्टर्स, क्लास, एट्रिब्यूट, और स्यूडो-क्लास सेलेक्टर्स, तत्व और स्यूडो-एलिमेंट सेलेक्टर्स।

    कैस्केडिंग और विरासत (Inheritance) क्या हैं?

    कैस्केडिंग (Cascading) का मतलब है कि CSS नियम एक के बाद एक लागू होते हैं। यदि कई नियम एक ही तत्व पर लागू होते हैं, तो अंतिम नियम लागू होगा। विरासत (Inheritance) का मतलब है कि कुछ CSS गुण पैरेंट तत्वों से अपने चाइल्ड तत्वों में स्वाभाविक रूप से विरासत में मिलते हैं।

    CSS का प्रभावी उपयोग कैसे करें?

    CSS का प्रभावी उपयोग करने के लिए सुसंगतता बनाए रखें, क्लास और आईडी का सही उपयोग करें, प्राथमिकता का ध्यान रखें, कमेंट्स का उपयोग करें, स्टाइल नियमों को पुन: उपयोग करें, और रिस्पॉन्सिव डिजाइन के लिए मीडिया क्वेरीज का उपयोग करें।

    इनलाइन, इंटरनल, और एक्सटर्नल CSS में क्या अंतर है?

    • इनलाइन CSS: HTML टैग के भीतर सीधे स्टाइल लागू करता है।
    • इंटरनल CSS: HTML पेज के <head> सेक्शन में <style> टैग के भीतर स्टाइल लिखता है।
    • एक्सटर्नल CSS: अलग CSS फाइल में स्टाइल्स को परिभाषित करता है और HTML पेज में <link> टैग का उपयोग करके इसे लिंक करता है।

    क्या सभी CSS गुण विरासत में मिलते हैं?

    नहीं, सभी CSS गुण विरासत में नहीं मिलते। कुछ गुण जैसे color और font-family स्वाभाविक रूप से विरासत में मिलते हैं, जबकि margin, padding, आदि गुण विरासत में नहीं मिलते।

    कैसे सुनिश्चित करें कि मेरी वेबसाइट विभिन्न ब्राउज़रों पर सही ढंग से दिखे?

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

    यह भी जानें

    chapter 6 box model Good Vibes Only

    अध्याय 6: बॉक्स मॉडल (Box Model)

    chapter 9 CSS Transitions and Transformations Good Vibes Only

    अध्याय 9: CSS ट्रांज़िशन और ट्रांसफॉर्मेशन (CSS Transitions and Transformations)

    Tailwind CSS की ग्रिड क्लासेज़ (Grid Classes of Tailwind CSS)

    tailwind css Good Vibes Only

    Tailwind CSS: आधुनिक वेब डिज़ाइन के लिए उपयोगी CSS फ्रेमवर्क



    Table of Contents

    → Index