CSS के मूल तत्व और तकनीकें

Oct 6, 2024

लेक्चर नोट्स: CSS Basics

1. CSS का परिचय

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

2. CSS के प्रकार

2.1 Inline CSS

  • CSS को HTML टैग के अंदर लिखा जाता है।
  • उदाहरण: <p style="color:red;">Hello</p>

2.2 Internal CSS

  • CSS को <style> टैग के अंदर लिखा जाता है, जो <head> के अंदर होता है।
  • उदाहरण:
<head>
    <style>
        p { color: blue; }
    </style>
</head>

2.3 External CSS

  • CSS को एक अलग .css फाइल में लिखा जाता है और HTML फाइल में लिंक किया जाता है।
  • उदाहरण:
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

3. CSS प्रॉपर्टीज

3.1 रंग और बैकग्राउंड

  • color: टेक्स्ट का रंग निर्धारित करता है।
  • background-color: बैकग्राउंड का रंग निर्धारित करता है।
  • background-image: बैकग्राउंड में इमेज जोड़ता है।

3.2 बॉर्डर, पेडिंग और मार्जिन

  • border: एलिमेंट का बॉर्डर जोड़ता है।
  • padding: अंदर की स्पेस।
  • margin: बाहरी स्पेस।

3.3 फॉन्ट प्रॉपर्टीज

  • font-family: फॉन्ट का प्रकार।
  • font-size: फॉन्ट का आकार।
  • font-weight: फॉन्ट की मोटाई।
  • line-height: लाइन की ऊँचाई।

4. CSS सेलेक्टर्स

4.1 एलिमेंट सेलेक्टर्स

  • सीधे HTML टैग का चयन।

4.2 क्लास सेलेक्टर्स

  • .classname का उपयोग करके HTML एलिमेंट्स का चयन।

4.3 ID सेलेक्टर्स

  • #idname का उपयोग करके एक विशेष एलिमेंट का चयन।

4.4 प्सूडो सेलेक्टर्स

  • उपयोगकर्ता के इंटरैक्शन की स्थिति को दर्शाता है जैसे :hover और :active।

5. Flexbox

  • Flexbox एक लेआउट मॉडल है जो कंटेनर के बच्चों को एक पंक्ति या स्तंभ में व्यवस्थित करता है।
  • display: flex; का उपयोग करके इसे शुरू किया जाता है।
  • justify-content: सामग्री को कैसे व्यवस्थित किया जाए (center, space-between, space-around)।
  • align-items: ऊर्ध्वाधर संरेखण।

6. CSS ग्रिड

  • ग्रिड एक 2D लेआउट सिस्टम है जो तत्वों को रो और कॉलम में व्यवस्थित करता है।
  • grid-template-columns: कॉलम की संख्या और आकार को निर्धारित करता है।
  • grid-template-rows: पंक्तियों की संख्या और आकार को निर्धारित करता है।
  • gap: तत्वों के बीच की जगह।

7. असाइनमेंट

  • गैलरी ऐप बनाने का असाइनमेंट।
  • 10-15 फोटो डाउनलोड करें और उन्हें ग्रिड में व्यवस्थित करें।
  • सुनिश्चित करें कि फोटो अन्य फोटोस के साथ सही ढंग से संरेखित हो।
  • यह लेक्चर CSS के मूल तत्वों और उपयोग को समझाने पर केंद्रित था।
  • CSS का अभ्यास आवश्यक है, इसलिए परियोजनाएँ बनाने का प्रयास करें।
  • CSS और HTML का सही ज्ञान होना आवश्यक है।