CSS

CSS की पूरी नोट्स - हिंदी में

CSS का परिचय

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

CSS का उपयोग कैसे करें?

CSS को HTML में 3 तरीकों से लागू किया जा सकता है:

• Inline CSS: यह HTML टैग के भीतर ही स्टाइल को लागू करता है।
• Internal CSS: HTML दस्तावेज़ के <style> टैग के भीतर CSS को रखा जाता है।
• External CSS: एक अलग CSS फ़ाइल (जो .css एक्सटेंशन वाली होती है) को HTML में लिंक किया जाता है।

CSS में बुनियादी सिंटेक्स

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

• सेलेक्टर (Selector): यह वह तत्व है जिस पर CSS लागू करना है।
• प्रॉपर्टी (Property): यह वह गुण है जिसे बदलना है।
• मान (Value): यह वह मान है जिसे प्रॉपर्टी के लिए सेट किया जाता है।

उदाहरण:

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

यह CSS कोड सभी h1 तत्वों का रंग नीला और फॉन्ट आकार 24px करेगा।

CSS के मुख्य प्रॉपर्टीज

1. रंग (Color)

किसी भी HTML तत्व का रंग सेट करने के लिए color प्रॉपर्टी का उपयोग किया जाता है।

p {
    color: red;
}

2. बैकग्राउंड (Background)

वेब पेज के बैकग्राउंड को सेट करने के लिए background प्रॉपर्टी का उपयोग करते हैं।

body {
    background-color: lightblue;
}

3. बॉर्डर (Border)

HTML तत्व के चारों ओर बॉर्डर जोड़ने के लिए border प्रॉपर्टी का उपयोग किया जाता है।

div {
    border: 2px solid black;
}

4. मार्जिन (Margin) और पैडिंग (Padding)

मार्जिन और पैडिंग दोनों तत्वों के चारों ओर जगह बनाने के लिए उपयोग किए जाते हैं, लेकिन इन दोनों में अंतर होता है:

• Margin: यह तत्वों के बीच बाहर की जगह को नियंत्रित करता है।
• Padding: यह तत्व के अंदर की जगह को नियंत्रित करता है।

div {
    margin: 20px;
    padding: 15px;
}

CSS में लेआउट और स्थिति

1. Display

display प्रॉपर्टी का उपयोग यह नियंत्रित करने के लिए किया जाता है कि तत्व किस प्रकार प्रदर्शित होगा।

div {
    display: inline-block;
}

2. Position

CSS में position प्रॉपर्टी का उपयोग तत्वों की स्थिति निर्धारित करने के लिए किया जाता है।

div {
    position: relative;
    top: 10px;
    left: 20px;
}

CSS से जुड़े कुछ महत्वपूर्ण टैग्स

HTML में CSS को लागू करने के लिए विभिन्न टैग्स का उपयोग किया जाता है।

• <style> - यह टैग HTML दस्तावेज़ में CSS स्टाइल को जोड़ने के लिए प्रयोग होता है।
• <link> - यह टैग बाहरी CSS फाइल को HTML दस्तावेज़ से जोड़ने के लिए प्रयोग किया जाता है।
• <meta> - यह टैग वेब पेज की मेटा जानकारी जैसे कि वर्णमाला सेटिंग्स, कीवर्ड आदि प्रदान करने के लिए प्रयोग होता है।

Advanced CSS Features

CSS में कुछ एडवांस फीचर्स होते हैं, जैसे:

• CSS Grid: यह एक दो-आयामी लेआउट प्रणाली है जो वेब पेजों को व्यवस्थित करने में मदद करती है।
• CSS Flexbox: यह एक सिंगल-आयामी लेआउट प्रणाली है जो कंटेनर के भीतर आइटमों को व्यवस्थित करने के लिए उपयोग होती है।
• CSS Animations: यह वेब पेजों में एनिमेशन प्रभाव जोड़ने के लिए प्रयोग होती है।

8888888888888888888888888888888888

CSS के सभी तत्व - हिंदी में

1. रंग (Color) और बैकग्राउंड (Background)

CSS में color प्रॉपर्टी का उपयोग टेक्स्ट का रंग सेट करने के लिए किया जाता है। background-color प्रॉपर्टी का उपयोग बैकग्राउंड रंग को सेट करने के लिए किया जाता है।

p {
    color: red;
    background-color: lightyellow;
}

यह कोड p तत्व का रंग लाल और बैकग्राउंड रंग हल्का पीला सेट करेगा।

2. फॉन्ट और टेक्स्ट

CSS के माध्यम से हम टेक्स्ट के फॉन्ट, आकार, वजन और अलाइनमेंट को कस्टमाइज कर सकते हैं।

• font-family: यह प्रॉपर्टी फॉन्ट को सेट करती है।
• font-size: यह प्रॉपर्टी फॉन्ट का आकार सेट करती है।
• font-weight: यह प्रॉपर्टी फॉन्ट का वजन सेट करती है।
• text-align: यह प्रॉपर्टी टेक्स्ट को अलाइन करती है।

p {
    font-family: 'Arial', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

यह कोड p तत्व के टेक्स्ट को Arial फॉन्ट, 18px आकार, बोल्ड और सेंटर में अलाइन करेगा।

3. बॉर्डर (Border)

CSS में border प्रॉपर्टी का उपयोग तत्व के चारों ओर बॉर्डर लगाने के लिए किया जाता है।

div {
    border: 2px solid black;
}

यह कोड div तत्व के चारों ओर 2px मोटा और काला बॉर्डर लगाएगा।

4. मार्जिन (Margin) और पैडिंग (Padding)

मार्जिन और पैडिंग दोनों ही तत्वों के चारों ओर जगह बनाने के लिए उपयोग होते हैं। लेकिन इन दोनों में अंतर है:

• Margin: यह बाहरी जगह को नियंत्रित करता है (तत्वों के बीच का अंतर)।
• Padding: यह अंदर की जगह को नियंत्रित करता है (तत्व के अंदर का अंतर)।

div {
    margin: 20px;
    padding: 10px;
}

यह कोड div तत्व के चारों ओर 20px मार्जिन और 10px पैडिंग लगाएगा।

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

CSS का बॉक्स मॉडल किसी भी HTML तत्व की संरचना को निर्धारित करता है, जिसमें कंटेंट, पैडिंग, बॉर्डर, और मार्जिन शामिल होते हैं।

• content: यह तत्व का मुख्य कंटेंट होता है।
• padding: यह कंटेंट और बॉर्डर के बीच की जगह है।
• border: यह कंटेंट और पैडिंग के चारों ओर होता है।
• margin: यह बॉर्डर और अन्य तत्वों के बीच की जगह है।

div {
    width: 200px;
    padding: 15px;
    border: 5px solid black;
    margin: 30px;
}

यह कोड div तत्व की चौड़ाई को 200px, पैडिंग को 15px, बॉर्डर को 5px और मार्जिन को 30px सेट करेगा।

6. पोजीशनिंग (Positioning)

CSS में पोजीशनिंग के द्वारा आप तत्वों को वेब पेज पर निर्धारित स्थान पर रख सकते हैं। CSS पोजीशनिंग में निम्नलिखित प्रकार होते हैं:

• static: डिफ़ॉल्ट पोजीशन, यह किसी भी बदलाव के बिना सामान्य रूप से तत्व को रखता है।
• relative: तत्व को उसके सामान्य स्थान से शिफ्ट करने की अनुमति देता है।
• absolute: तत्व को उसके सबसे निकटतम पोजिशनर पेरेंट के सापेक्ष रखा जाता है।
• fixed: तत्व को विंडो के अनुसार पोजीशन किया जाता है, जिससे पेज स्क्रॉल करने पर भी वह स्थिर रहता है।
• sticky: यह पोजीशन स्क्रॉल करते समय तत्व को एक निश्चित स्थान पर फिक्स कर देती है।

div {
    position: relative;
    top: 20px;
    left: 50px;
}

यह कोड div तत्व को उसके सामान्य स्थान से 20px ऊपर और 50px बाएं शिफ्ट करेगा।

7. डिस्प्ले (Display)

CSS में display प्रॉपर्टी का उपयोग यह निर्धारित करने के लिए किया जाता है कि तत्व कैसे प्रदर्शित होगा।

• block: तत्व को एक ब्लॉक तत्व की तरह प्रदर्शित करता है (पूरा उपलब्ध चौड़ाई लेता है)।
• inline: तत्व को एक इनलाइन तत्व की तरह प्रदर्शित करता है (केवल आवश्यक चौड़ाई लेता है)।
• inline-block: यह तत्व को ब्लॉक और इनलाइन दोनों के गुण प्रदान करता है।
• none: यह तत्व को पूरी तरह से हटा देता है।

div {
    display: inline-block;
}

यह कोड div तत्व को inline-block के रूप में प्रदर्शित करेगा, जिससे वह अन्य तत्वों के साथ समान पंक्ति में प्रदर्शित होगा।

8. ट्रांसफॉर्म (Transform)

CSS में transform प्रॉपर्टी का उपयोग किसी तत्व को घुमाने (rotate), आकार बदलने (scale), स्थानांतरित करने (translate) या तिरछा (skew) करने के लिए किया जाता