full css code guide

1. सीएसएस क्या है और कैसे काम करता है? (What is CSS & How it Works?)

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

यह कैसे काम करता है:

• नियम (Rules): सीएसएस नियमों के सेट से बना होता है। प्रत्येक नियम में एक सेलेक्टर (Selector) और एक घोषणा ब्लॉक (Declaration Block) होता है।
• सेलेक्टर (Selector): यह बताता है कि किस एचटीएमएल तत्व (या तत्वों) पर स्टाइल लागू करना है (जैसे p, .my-class, #my-id)।
• घोषणा ब्लॉक (Declaration Block): यह कर्ली ब्रेसिज़ {} में संलग्न होता है और इसमें एक या अधिक घोषणाएं (Declarations) होती हैं, जिन्हें सेमीकोलन ; से अलग किया जाता है।
• घोषणा (Declaration): प्रत्येक घोषणा में एक प्रॉपर्टी (Property) और एक वैल्यू (Value) होती है, जिन्हें कोलन : से अलग किया जाता है। प्रॉपर्टी बताती है कि कौन सी स्टाइल विशेषता बदलनी है (जैसे color, font-size), और वैल्यू बताती है कि उसे क्या मान देना है (जैसे blue, 16px)।

/* यह एक सीएसएस नियम है */

selector {

  property: value; /* यह एक घोषणा है */

  another-property: another-value;

}

/* उदाहरण */

p { /* सेलेक्टर: सभी 
 तत्व */

  color: green; /* प्रॉपर्टी: color, वैल्यू: green */

  font-size: 14px; /* प्रॉपर्टी: font-size, वैल्यू: 14px */

}

कैस्केडिंग (Cascading): "कैस्केडिंग" का मतलब है कि स्टाइल नियम एक विशिष्ट क्रम में लागू होते हैं। यदि एक ही तत्व के लिए कई नियम परिभाषित हैं, तो सीएसएस यह निर्धारित करने के लिए नियमों का एक सेट (विशिष्टता, महत्व, स्रोत क्रम) का पालन करता है कि कौन सा नियम प्राथमिकता लेगा। अधिक विशिष्ट सेलेक्टर (जैसे आईडी सेलेक्टर) कम विशिष्ट सेलेक्टर (जैसे टैग सेलेक्टर) पर हावी होते हैं।

2. सीएसएस में सेलेक्टर क्या होते हैं? (CSS Selectors)

सेलेक्टर पैटर्न होते हैं जिनका उपयोग एचटीएमएल तत्वों को "चुनने" या "लक्ष्यित" करने के लिए किया जाता है ताकि उन पर स्टाइल लागू की जा सके। कुछ सामान्य सेलेक्टर प्रकार:

• टाइप सेलेक्टर (Type Selector): एचटीएमएल टैग नाम से तत्वों का चयन करता है।

  h1 { color: navy; } /* सभी 
   तत्वों को चुनता है */
  
  p { line-height: 1.6; } /* सभी 
   तत्वों को चुनता है */

• क्लास सेलेक्टर (Class Selector): उन तत्वों का चयन करता है जिनमें एक विशिष्ट class एट्रिब्यूट होता है। क्लास नाम के पहले डॉट (.) लगाया जाता है।

  .highlight { background-color: yellow; } /* class="highlight" वाले सभी तत्व */
  
  .important-text { font-weight: bold; }

  <p class="highlight">यह टेक्स्ट हाइलाइटेड है।</p>
  
  <span class="important-text">यह महत्वपूर्ण है।</span>

• आईडी सेलेक्टर (ID Selector): एक विशिष्ट id एट्रिब्यूट वाले तत्व का चयन करता है। आईडी नाम के पहले हैश (#) लगाया जाता है। एक पेज पर प्रत्येक आईडी अद्वितीय होनी चाहिए।

  #main-logo { border: 1px solid black; } /* id="main-logo" वाला तत्व */
  
  #footer { margin-top: 20px; }

  <img id="main-logo" src="..." alt="Logo">
  
  <div id="footer">...</div>

• एट्रिब्यूट सेलेक्टर (Attribute Selector): विशिष्ट एट्रिब्यूट या एट्रिब्यूट मान वाले तत्वों का चयन करता है।

  a[target="_blank"] { color: red; } /* target="_blank" वाले सभी लिंक */
  
  input[type="text"] { border: 1px solid gray; } /* type="text" वाले सभी इनपुट */

• स्यूडो-क्लास सेलेक्टर (Pseudo-class Selector): तत्वों की विशेष स्थिति का चयन करता है (जैसे माउस होवर, विज़िटेड लिंक, पहला बच्चा)। यह कोलन (:) से शुरू होता है।

  a:hover { text-decoration: none; } /* जब माउस लिंक पर हो */
  
  li:first-child { font-weight: bold; } /* लिस्ट का पहला आइटम */
  
  input:focus { outline: 2px solid blue; } /* जब इनपुट फ़ील्ड फ़ोकस में हो */

• स्यूडो-एलिमेंट सेलेक्टर (Pseudo-element Selector): किसी तत्व के हिस्से को स्टाइल करने के लिए (जैसे पहली पंक्ति, पहला अक्षर)। यह डबल कोलन (::) से शुरू होता है (कुछ पुराने स्यूडो-एलिमेंट के लिए सिंगल कोलन भी काम करता है)।

  p::first-line { font-variant: small-caps; } /* पैराग्राफ की पहली लाइन */
  
  p::before { content: "* "; } /* पैराग्राफ से पहले कंटेंट जोड़ें */

• ग्रुपिंग सेलेक्टर (Grouping Selector): कई सेलेक्टरों पर समान स्टाइल लागू करने के लिए उन्हें कॉमा (,) से अलग करें।

  h1, h2, h3 { font-family: 'Georgia', serif; } /* h1, h2, और h3 पर लागू */

• कॉम्बिनेटर (Combinators): तत्वों के बीच संबंध के आधार पर चयन करते हैं (जैसे वंशज, बच्चे, आसन्न भाई, सामान्य भाई)।

  div p { color: gray; } /* div के अंदर किसी भी स्तर पर मौजूद p (वंशज) */
  
  div > p { border: 1px solid red; } /* div का प्रत्यक्ष बच्चा p */
  
  h2 + p { margin-top: 0; } /* h2 के तुरंत बाद आने वाला p (आसन्न भाई) */
  
  h2 ~ p { text-indent: 1em; } /* h2 के बाद आने वाले सभी p भाई */

3. सीएसएस में प्रॉपर्टी और वैल्यू क्या होते हैं? (CSS Properties & Values)

सीएसएस नियम के घोषणा ब्लॉक ({}) के अंदर, आप प्रॉपर्टी-वैल्यू जोड़े का उपयोग करके स्टाइल परिभाषित करते हैं।

• प्रॉपर्टी (Property): यह एक स्टाइल विशेषता है जिसे आप बदलना चाहते हैं। उदाहरण: color, font-size, background-color, margin, padding, border, width, height, display आदि।
• वैल्यू (Value): यह प्रॉपर्टी के लिए निर्धारित मान है। प्रत्येक प्रॉपर्टी के लिए मान्य वैल्यू का एक सेट होता है। वैल्यू कीवर्ड, संख्यात्मक मान (लंबाई, प्रतिशत), रंग मान आदि हो सकते हैं।

p {

  /* प्रॉपर्टी: color, वैल्यू: हेक्साडेसिमल रंग कोड */

  color: #333333;

  /* प्रॉपर्टी: font-size, वैल्यू: पिक्सेल में लंबाई */

  font-size: 16px;

  /* प्रॉपर्टी: margin-top, वैल्यू: em में लंबाई (रिलेटिव यूनिट) */

  margin-top: 1em;

  /* प्रॉपर्टी: border, वैल्यू: शॉर्टहैंड (चौड़ाई, स्टाइल, रंग) */

  border: 1px solid black;

  /* प्रॉपर्टी: display, वैल्यू: कीवर्ड */

  display: block;

}

विभिन्न प्रॉपर्टीज़ विभिन्न प्रकार की वैल्यू स्वीकार करती हैं, जैसे:

• लंबाई (Length): px (पिक्सेल), em (पैरेंट तत्व के फ़ॉन्ट आकार के सापेक्ष), rem (रूट तत्व के फ़ॉन्ट आकार के सापेक्ष), % (पैरेंट तत्व के सापेक्ष प्रतिशत), vw (व्यूपोर्ट चौड़ाई का प्रतिशत), vh (व्यूपोर्ट ऊंचाई का प्रतिशत)।
• रंग (Color): कीवर्ड (red, blue), हेक्स कोड (#FF0000, #f00), RGB (rgb(255, 0, 0)), RGBA (rgba(255, 0, 0, 0.5) - अल्फा पारदर्शिता के साथ), HSL, HSLA।
• कीवर्ड (Keywords): auto, none, solid, block, inline, flex, grid, center, bold, italic आदि।
• URLs: url('path/to/image.jpg') (जैसे पृष्ठभूमि छवियों के लिए)।

4. सीएसएस में फॉन्ट कैसे स्टाइल करें? (Styling Fonts)

सीएसएस टेक्स्ट के फ़ॉन्ट को नियंत्रित करने के लिए कई प्रॉपर्टीज़ प्रदान करता है:

• font-family: फ़ॉन्ट फेस (जैसे Arial, Verdana, Georgia) निर्दिष्ट करता है। आप फ़ॉलबैक फ़ॉन्ट की सूची प्रदान कर सकते हैं।

  body {
  
    /* पहले 'Helvetica Neue' का उपयोग करने का प्रयास करें, फिर Helvetica, फिर Arial, फिर कोई भी sans-serif */
  
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  
  }

• font-size: फ़ॉन्ट का आकार निर्धारित करता है (जैसे 16px, 1.2em, 120%)।
• font-weight: फ़ॉन्ट की मोटाई निर्धारित करता है (जैसे normal, bold, या संख्यात्मक मान 100- 900)।
• font-style: फ़ॉन्ट स्टाइल निर्धारित करता है (जैसे normal, italic, oblique)।
• line-height: टेक्स्ट लाइनों के बीच की ऊंचाई (लीडिंग) निर्धारित करता है। इसे अक्सर यूनिटलेस मान (जैसे 1.6) के रूप में सेट किया जाता है, जो फ़ॉन्ट आकार का गुणक होता है।
• text-align: टेक्स्ट का क्षैतिज संरेखण निर्धारित करता है (left, right, center, justify)।
• text-decoration: टेक्स्ट पर सजावट जोड़ता है (none, underline, overline, line-through)।
• text-transform: टेक्स्ट का केस बदलता है (none, capitalize, uppercase, lowercase)।
• font: उपरोक्त कई प्रॉपर्टीज़ के लिए एक शॉर्टहैंड प्रॉपर्टी।

यह स्टाइल किया गया टेक्स्ट है।

.styled-text {

  font-family: Georgia, serif;

  font-size: 18px;

  font-weight: bold;

  font-style: italic;

  line-height: 1.5;

  text-align: center;

  text-decoration: underline;

  color: #2980b9;

}

/* Font shorthand उदाहरण */

.shorthand-font {

  /* क्रम: style weight size/line-height family */

  font: italic bold 16px/1.6 Arial, sans-serif;

}

5. सीएसएस में रंग और पृष्ठभूमि कैसे सेट करें? (Setting Colors & Backgrounds)

• color: तत्व की टेक्स्ट सामग्री का रंग निर्धारित करता है।
• background-color: तत्व की पृष्ठभूमि का रंग निर्धारित करता है।
• background-image: तत्व के लिए पृष्ठभूमि छवि सेट करता है (url('path/image.jpg'))।
• background-repeat: पृष्ठभूमि छवि को कैसे दोहराया जाए (repeat, repeat-x, repeat-y, no-repeat)।
• background-position: पृष्ठभूमि छवि की प्रारंभिक स्थिति निर्धारित करता है (top left, center center, 50% 50%, 10px 20px)।
• background-size: पृष्ठभूमि छवि का आकार निर्धारित करता है (auto, cover, contain, या विशिष्ट आकार 100px 50px)।
• background-attachment: क्या पृष्ठभूमि छवि स्क्रॉल करती है या स्थिर रहती है (scroll, fixed)।
• background: उपरोक्त पृष्ठभूमि प्रॉपर्टीज़ के लिए एक शॉर्टहैंड प्रॉपर्टी।

इस तत्व में टेक्स्ट का रंग, पृष्ठभूमि का रंग और एक पृष्ठभूमि छवि है।

.colored-background {

  color: white; /* टेक्स्ट का रंग */

  background-color: #34495e; /* पृष्ठभूमि का रंग */

  border: 2px solid #2c3e50;

  padding: 20px;

  /* पृष्ठभूमि छवि */

  background-image: url('https://placehold.co/100x100/ecf0f1/2c3e50?text=BG');

  background-repeat: no-repeat; /* छवि को दोहराएं नहीं */

  background-position: right center; /* छवि को दाईं ओर बीच में रखें */

}

/* Background shorthand उदाहरण */

.shorthand-background {

  background: #e74c3c url('image.png') no-repeat center center / cover;

  /* क्रम: color image repeat position / size attachment origin clip */

}

6. सीएसएस में मार्जिन और पैडिंग कैसे सेट करें? (Setting Margin & Padding)

मार्जिन और पैडिंग सीएसएस बॉक्स मॉडल (Box Model) का हिस्सा हैं, जो बताता है कि तत्व पेज पर कैसे स्थान घेरते हैं।

कंटेंट एरिया
(पैडिंग अंदर है)

(मार्जिन बाहर है)

• पैडिंग (Padding): तत्व के कंटेंट और उसके बॉर्डर के बीच का स्थान। यह तत्व के बैकग्राउंड को प्रभावित करता है।
  • padding-top, padding-right, padding-bottom, padding-left: व्यक्तिगत साइड्स के लिए।
  • padding: शॉर्टहैंड प्रॉपर्टी।
    • 1 मान: चारों तरफ समान पैडिंग। padding: 10px;
    • 2 मान: पहला टॉप/बॉटम, दूसरा लेफ्ट/राइट। padding: 10px 20px;
    • 3 मान: पहला टॉप, दूसरा लेफ्ट/राइट, तीसरा बॉटम। padding: 10px 20px 5px;
    • 4 मान: टॉप, राइट, बॉटम, लेफ्ट (घड़ी की दिशा में)। padding: 10px 20px 5px 15px;
• मार्जिन (Margin): तत्व के बॉर्डर के बाहर का स्थान, जो इसे अन्य तत्वों से अलग करता है। मार्जिन ट्रांसपेरेंट होता है।
  • margin-top, margin-right, margin-bottom, margin-left: व्यक्तिगत साइड्स के लिए।
  • margin: शॉर्टहैंड प्रॉपर्टी (पैडिंग के समान मान क्रम)।
  • मार्जिन कोलैप्सिंग (Margin Collapsing): वर्टिकल मार्जिन (टॉप/बॉटम) कुछ स्थितियों में आपस में मिल (कोलैप्स) सकते हैं।

.box {

  width: 200px;

  background-color: lightblue;

  border: 1px solid blue;

  /* पैडिंग: कंटेंट और बॉर्डर के बीच 15px स्पेस */

  padding: 15px;

  /* मार्जिन: बॉर्डर के बाहर 20px स्पेस */

  margin: 20px;

  /* या अलग-अलग: */

  /* padding-top: 10px; */

  /* padding-right: 20px; */

  /* padding-bottom: 10px; */

  /* padding-left: 20px; */

  /* margin-top: 10px; */

  /* margin-right: auto; /* केंद्र में लाने के लिए */

  /* margin-bottom: 30px; */

  /* margin-left: auto; /* केंद्र में लाने के लिए */

}

7. सीएसएस में फ्लेक्सबॉक्स कैसे उपयोग करें? (Using Flexbox)

फ्लेक्सिबल बॉक्स लेआउट मॉड्यूल (Flexible Box Layout Module), जिसे आमतौर पर फ्लेक्सबॉक्स (Flexbox) कहा जाता है, एक आयामी (one-dimensional) लेआउट मॉडल है जो कंटेनर के भीतर आइटम्स के बीच स्थान वितरित करने और उन्हें संरेखित करने का एक कुशल तरीका प्रदान करता है। यह मुख्य रूप से आइटम्स को एक पंक्ति या एक कॉलम में व्यवस्थित करने के लिए डिज़ाइन किया गया है।

मुख्य अवधारणाएं:

• फ्लेक्स कंटेनर (Flex Container): वह पैरेंट तत्व जिस पर display: flex; या display: inline-flex; लागू किया जाता है।
• फ्लेक्स आइटम (Flex Items): फ्लेक्स कंटेनर के प्रत्यक्ष बच्चे।
• मुख्य अक्ष (Main Axis): वह प्राथमिक अक्ष जिसके साथ फ्लेक्स आइटम रखे जाते हैं (डिफ़ॉल्ट रूप से क्षैतिज/पंक्ति)।
• क्रॉस अक्ष (Cross Axis): मुख्य अक्ष के लंबवत अक्ष (डिफ़ॉल्ट रूप से ऊर्ध्वाधर/कॉलम)।

कंटेनर प्रॉपर्टीज़ (Parent):

• display: flex | inline-flex;: फ्लेक्स कंटेनर बनाता है।
• flex-direction: row | row-reverse | column | column-reverse;: मुख्य अक्ष की दिशा निर्धारित करता है।
• flex-wrap: nowrap | wrap | wrap-reverse;: क्या आइटम को अगली लाइन पर रैप करना है।
• justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;: मुख्य अक्ष पर आइटम्स का संरेखण।
• align-items: stretch | flex-start | flex-end | center | baseline;: क्रॉस अक्ष पर आइटम्स का संरेखण (एकल पंक्ति के लिए)।
• align-content: flex-start | flex-end | center | space-between | space-around | stretch;: क्रॉस अक्ष पर पंक्तियों का संरेखण (जब flex-wrap: wrap; हो)।
• gap, row-gap, column-gap: फ्लेक्स आइटम्स के बीच गैप।

आइटम प्रॉपर्टीज़ (Children):

• order: <integer>;: आइटम का क्रम बदलता है।
• flex-grow: <number>;: आइटम कितना अतिरिक्त स्थान लेगा (अनुपात में)।
• flex-shrink: <number>;: आइटम कितना सिकुड़ेगा (अनुपात में)।
• flex-basis: <length> | auto;: आइटम का प्रारंभिक आकार।
• flex: <grow> <shrink> <basis>;: उपरोक्त तीन के लिए शॉर्टहैंड।
• align-self: auto | flex-start | flex-end | center | baseline | stretch;: व्यक्तिगत आइटम के लिए क्रॉस अक्ष संरेखण को ओवरराइड करता है।

उदाहरण: आइटम्स को केंद्र में रखें और उनके बीच समान दूरी हो।

आइटम 1

आइटम 2 (ऊपर)

आइटम 3

.container {

  display: flex;

  height: 150px; /* ऊंचाई ताकि align-items दिखे */

  background-color: #3498db;

  padding: 10px;

  border-radius: 4px;

  /* मुख्य अक्ष (row) पर आइटम्स को फैलाएं */

  justify-content: space-around;

  /* क्रॉस अक्ष (column) पर आइटम्स को केंद्र में रखें */

  align-items: center;

}

.item {

  background-color: #ecf0f1;

  color: #2c3e50;

  padding: 20px;

  text-align: center;

  border-radius: 4px;

}

.item-2 {

  /* इस आइटम को ऊपर संरेखित करें */

  align-self: flex-start;

}

8. सीएसएस में ग्रिड लेआउट कैसे उपयोग करें? (Using Grid Layout)

सीएसएस ग्रिड लेआउट (CSS Grid Layout) एक द्वि-आयामी (two-dimensional) लेआउट सिस्टम है जो वेब पेजों के लिए डिज़ाइन किया गया है। यह आपको सामग्री को पंक्तियों (rows) और कॉलमों (columns) में व्यवस्थित करने की अनुमति देता है, जिससे जटिल लेआउट बनाना आसान हो जाता है जो पहले मुश्किल थे।

मुख्य अवधारणाएं:

• ग्रिड कंटेनर (Grid Container): वह पैरेंट तत्व जिस पर display: grid; या display: inline-grid; लागू किया जाता है।
• ग्रिड आइटम (Grid Items): ग्रिड कंटेनर के प्रत्यक्ष बच्चे।
• ग्रिड लाइन्स (Grid Lines): ग्रिड संरचना को विभाजित करने वाली क्षैतिज और ऊर्ध्वाधर रेखाएँ।
• ग्रिड ट्रैक (Grid Tracks): दो आसन्न ग्रिड लाइनों के बीच का स्थान (पंक्ति या कॉलम)।
• ग्रिड सेल (Grid Cell): दो आसन्न पंक्ति और दो आसन्न कॉलम लाइनों के बीच का स्थान (ग्रिड की सबसे छोटी इकाई)।
• ग्रिड एरिया (Grid Area): चार ग्रिड लाइनों द्वारा परिभाषित कोई भी आयताकार क्षेत्र, जिसमें कई सेल हो सकते हैं।

कंटेनर प्रॉपर्टीज़ (Parent):

• display: grid | inline-grid;: ग्रिड कंटेनर बनाता है।
• grid-template-columns: कॉलम ट्रैक के आकार और नाम को परिभाषित करता है।
• grid-template-rows: रो ट्रैक के आकार और नाम को परिभाषित करता है।
• grid-template-areas: नामित ग्रिड एरिया का उपयोग करके लेआउट टेम्पलेट परिभाषित करता है।
• gap, row-gap, column-gap: ग्रिड ट्रैक्स के बीच गैप (गटर)।
• justify-items: start | end | center | stretch;: आइटम्स को उनके सेल के अंदर इनलाइन (पंक्ति) अक्ष पर संरेखित करता है।
• align-items: start | end | center | stretch;: आइटम्स को उनके सेल के अंदर ब्लॉक (कॉलम) अक्ष पर संरेखित करता है।
• justify-content: start | end | center | stretch | space-around | space-between | space-evenly;: ग्रिड को कंटेनर के अंदर इनलाइन अक्ष पर संरेखित करता है (यदि ग्रिड का कुल आकार कंटेनर से छोटा है)।
• align-content: start | end | center | stretch | space-around | space-between | space-evenly;: ग्रिड को कंटेनर के अंदर ब्लॉक अक्ष पर संरेखित करता है (यदि ग्रिड का कुल आकार कंटेनर से छोटा है)।

आइटम प्रॉपर्टीज़ (Children):

• grid-column-start, grid-column-end, grid-row-start, grid-row-end: आइटम किस ग्रिड लाइन पर शुरू और समाप्त होता है।
• grid-column: <start> / <end>;: कॉलम के लिए शॉर्टहैंड।
• grid-row: <start> / <end>;: रो के लिए शॉर्टहैंड।
• grid-area: <row-start> / <col-start> / <row-end> / <col-end> | <area-name>;: आइटम को एक नामित एरिया में रखता है या लाइनों का उपयोग करके परिभाषित करता है।
• justify-self: start | end | center | stretch;: व्यक्तिगत आइटम के लिए इनलाइन संरेखण को ओवरराइड करता है।
• align-self: start | end | center | stretch;: व्यक्तिगत आइटम के लिए ब्लॉक संरेखण को ओवरराइड करता है।

उदाहरण: 3 कॉलम का ग्रिड, जिसमें पहला आइटम 2 कॉलम लेता है।

आइटम 1 (2 कॉलम)

आइटम 2

आइटम 3

आइटम 4

.grid-container {

  display: grid;

  /* तीन बराबर चौड़ाई के कॉलम बनाएं */

  grid-template-columns: 1fr 1fr 1fr; /* fr यूनिट उपलब्ध स्थान का हिस्सा दर्शाती है */

  /* या: grid-template-columns: repeat(3, 1fr); */

  /* या: grid-template-columns: 100px auto 200px; */

  grid-template-rows: auto auto; /* दो पंक्तियाँ, ऊंचाई कंटेंट के अनुसार */

  gap: 15px; /* पंक्तियों और कॉलमों के बीच 15px का गैप */

  background-color: #3498db;

  padding: 10px;

  border-radius: 4px;

}

.grid-item {

  background-color: #ecf0f1;

  color: #2c3e50;

  padding: 20px;

  text-align: center;

  border-radius: 4px;

}

.item-1 {

  /* इस आइटम को कॉलम लाइन 1 से शुरू करें और कॉलम लाइन 3 पर समाप्त करें */

  grid-column-start: 1;

  grid-column-end: 3;

  /* शॉर्टहैंड: grid-column: 1 / 3; */

  /* इसे पंक्ति लाइन 1 पर रखें (डिफ़ॉल्ट) */

  /* grid-row: 1; */

  background-color: #f1c40f; /* अलग रंग */

}

9. सीएसएस में पोज़िशनिंग कैसे काम करती है? (CSS Positioning)

position प्रॉपर्टी निर्दिष्ट करती है कि दस्तावेज़ प्रवाह (document flow) में किसी तत्व को कैसे पोज़िशन किया जाता है। इसके साथ top, right, bottom, left और z-index प्रॉपर्टीज़ का उपयोग करके तत्व का अंतिम स्थान निर्धारित किया जाता है।

मुख्य position वैल्यू:

• static (डिफ़ॉल्ट): तत्व सामान्य दस्तावेज़ प्रवाह के अनुसार स्थित होता है। top, right, bottom, left, z-index का कोई प्रभाव नहीं पड़ता।
• relative: तत्व सामान्य दस्तावेज़ प्रवाह के अनुसार स्थित होता है, लेकिन फिर top, right, bottom, left का उपयोग करके उसे उसकी सामान्य स्थिति के सापेक्ष ऑफ़सेट किया जा सकता है। अन्य तत्वों की स्थिति इस ऑफ़सेट से प्रभावित नहीं होती है। यह एब्सोल्यूट पोज़िशन्ड बच्चों के लिए कंटेनिंग ब्लॉक के रूप में भी काम करता है।
• absolute: तत्व को सामान्य दस्तावेज़ प्रवाह से हटा दिया जाता है, और अन्य तत्व ऐसे व्यवहार करते हैं जैसे वह वहां नहीं है। इसे उसके निकटतम पोज़िशन्ड पूर्वज (positioned ancestor - यानी जिसका position मान static के अलावा कुछ और है) के सापेक्ष स्थित किया जाता है। यदि कोई पोज़िशन्ड पूर्वज नहीं है, तो यह प्रारंभिक कंटेनिंग ब्लॉक (आमतौर पर <html>) के सापेक्ष स्थित होता है। top, right, bottom, left का उपयोग करके इसे पोज़िशन किया जाता है।
• fixed: तत्व को सामान्य दस्तावेज़ प्रवाह से हटा दिया जाता है और व्यूपोर्ट (viewport - ब्राउज़र विंडो) के सापेक्ष स्थित किया जाता है। पेज स्क्रॉल होने पर भी यह अपनी जगह पर बना रहता है। top, right, bottom, left का उपयोग करके इसे पोज़िशन किया जाता है।
• sticky: तत्व सामान्य दस्तावेज़ प्रवाह के अनुसार स्थित होता है जब तक कि स्क्रॉलिंग उसे व्यूपोर्ट में एक निश्चित सीमा (जैसे top: 0;) तक नहीं ले जाती, जिसके बाद वह fixed की तरह व्यवहार करता है और अपनी जगह पर "चिपक" जाता है। यह अपने पैरेंट कंटेनर की सीमाओं के भीतर ही चिपकता है।

z-index प्रॉपर्टी तत्व के स्टैक ऑर्डर (stack order - कौन सा तत्व किसके ऊपर दिखाई देगा) को नियंत्रित करती है, लेकिन यह केवल पोज़िशन्ड तत्वों (static के अलावा) पर काम करती है। उच्च मान वाले तत्व निम्न मान वाले तत्वों के ऊपर दिखाई देते हैं।

उदाहरण: रिलेटिव कंटेनर के अंदर एब्सोल्यूट पोज़िशन्ड बॉक्स।

रिलेटिव कंटेनर

एब्सोल्यूट

.relative-container {

  position: relative; /* एब्सोल्यूट बच्चों के लिए कंटेनिंग ब्लॉक */

  width: 200px;

  height: 100px;

  border: 2px solid #2980b9;

  background-color: #ecf0f1;

  margin-top: 30px; /* ऊपर जगह बनाने के लिए */

}

.absolute-box {

  position: absolute;

  top: 20px; /* कंटेनर के टॉप से 20px नीचे */

  right: 20px; /* कंटेनर के राइट से 20px अंदर */

  width: 80px;

  height: 40px;

  background-color: #e74c3c;

  color: white;

  text-align: center;

  line-height: 40px; /* टेक्स्ट को वर्टिकली सेंटर करें */

  border-radius: 4px;

  z-index: 10; /* सुनिश्चित करें कि यह ऊपर है */

}

.fixed-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background-color: #333;

  color: white;

  padding: 10px;

  z-index: 1000; /* सबसे ऊपर रखने के लिए */

}

10. सीएसएस में ट्रांज़िशन कैसे बनाएं? (Creating Transitions)

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

मुख्य ट्रांज़िशन प्रॉपर्टीज़:

• transition-property: वह सीएसएस प्रॉपर्टी (या प्रॉपर्टीज़) निर्दिष्ट करती है जिस पर ट्रांज़िशन लागू होना चाहिए (जैसे background-color, opacity, transform, या all)।
• transition-duration: ट्रांज़िशन को पूरा होने में लगने वाला समय (जैसे 0.5s या 500ms)।
• transition-timing-function: ट्रांज़िशन की गति वक्र (speed curve) निर्धारित करती है (जैसे ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(...))। यह बताता है कि ट्रांज़िशन समय के साथ कैसे तेज या धीमा होता है।
• transition-delay: ट्रांज़िशन शुरू होने से पहले की देरी (जैसे 0.2s)।
• transition: उपरोक्त सभी प्रॉपर्टीज़ के लिए शॉर्टहैंड।

ट्रांज़िशन आमतौर पर किसी स्थिति परिवर्तन पर लागू होते हैं, जैसे :hover, :focus, या जब जावास्क्रिप्ट द्वारा क्लास जोड़ी/हटाई जाती है।

उदाहरण: होवर पर बैकग्राउंड रंग और आकार बदलें।

होवर करें

.my-box {

  width: 100px;

  height: 100px;

  background-color: #2ecc71; /* हरा */

  border-radius: 5px;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  /* शॉर्टहैंड ट्रांज़िशन: प्रॉपर्टी ड्यूरेशन टाइमिंग-फंक्शन डिले */

  /* सभी प्रॉपर्टीज़ पर 0.5 सेकंड का ease ट्रांज़िशन */

  transition: all 0.5s ease 0s;

  /* या अलग-अलग प्रॉपर्टीज़ निर्दिष्ट करें: */

  /* transition-property: background-color, transform; */

  /* transition-duration: 0.5s; */

  /* transition-timing-function: ease; */

  /* transition-delay: 0s; */

}

.my-box:hover {

  background-color: #e74c3c; /* लाल */

  transform: scale(1.2) rotate(10deg); /* बड़ा करें और घुमाएं */

  border-radius: 50%; /* गोल करें */

}

11. सीएसएस में एनिमेशन कैसे बनाएं? (Creating Animations)

सीएसएस एनिमेशन (CSS Animations) ट्रांज़िशन से अधिक शक्तिशाली होते हैं। वे आपको स्टाइल के कई चरणों (keyframes) को परिभाषित करके जटिल एनिमेशन बनाने की अनुमति देते हैं, और उन्हें स्वचालित रूप से चलाने, दोहराने और नियंत्रित करने के लिए अधिक विकल्प प्रदान करते हैं।

एनिमेशन बनाने के दो मुख्य भाग होते हैं:

1. @keyframes नियम: यह एनिमेशन के अनुक्रम को परिभाषित करता है। आप एनिमेशन के दौरान विभिन्न बिंदुओं (प्रतिशत 0% से 100%, या कीवर्ड from और to) पर स्टाइल निर्दिष्ट करते हैं।
2. एनिमेशन प्रॉपर्टीज़: इन प्रॉपर्टीज़ का उपयोग तत्व पर @keyframes नियम लागू करने और एनिमेशन को कॉन्फ़िगर करने के लिए किया जाता है।
   • animation-name: लागू किए जाने वाले @keyframes नियम का नाम।
   • animation-duration: एनिमेशन के एक चक्र की अवधि।
   • animation-timing-function: एनिमेशन की गति वक्र (ट्रांज़िशन के समान)।
   • animation-delay: एनिमेशन शुरू होने से पहले की देरी।
   • animation-iteration-count: एनिमेशन कितनी बार दोहराया जाना चाहिए (infinite हमेशा के लिए)।
   • animation-direction: क्या एनिमेशन को वैकल्पिक चक्रों पर उलट देना चाहिए (normal, reverse, alternate, alternate-reverse)।
   • animation-fill-mode: एनिमेशन के समाप्त होने के बाद (या शुरू होने से पहले) तत्व पर कौन सी स्टाइल लागू होती है (none, forwards, backwards, both)।
   • animation-play-state: एनिमेशन को रोकना या चलाना (running, paused)।
   • animation: उपरोक्त सभी एनिमेशन प्रॉपर्टीज़ के लिए शॉर्टहैंड।

उदाहरण: रंग बदलने और घूमने वाला बॉक्स।

एनिमेटिंग...

/* 1. कीफ्रेम्स परिभाषित करें */

@keyframes spinAndColorChange {

  0% {

    transform: rotate(0deg);

    background-color: #2ecc71; /* हरा */

  }

  50% {

    transform: rotate(180deg);

    background-color: #3498db; /* नीला */

  }

  100% {

    transform: rotate(360deg);

    background-color: #2ecc71; /* वापस हरा */

  }

}

/* 2. तत्व पर एनिमेशन लागू करें */

.animated-element {

  width: 100px;

  height: 100px;

  border-radius: 5px;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 1em 0;

  /* एनिमेशन शॉर्टहैंड: नाम ड्यूरेशन टाइमिंग-फंक्शन डिले इटरेशन-काउंट डायरेक्शन */

  animation: spinAndColorChange 3s linear 0s infinite normal;

  /* या अलग-अलग: */

  /* animation-name: spinAndColorChange; */

  /* animation-duration: 3s; */

  /* animation-timing-function: linear; */

  /* animation-iteration-count: infinite; /* लगातार दोहराएं */

  /* animation-direction: normal; */

}

12. सीएसएस में ट्रांसफॉर्म कैसे उपयोग करें? (Using Transforms)

सीएसएस transform प्रॉपर्टी आपको तत्वों को उनके सामान्य प्रवाह को प्रभावित किए बिना घुमाने (rotate), स्केल करने (scale), तिरछा करने (skew), या स्थानांतरित करने (translate) की अनुमति देती है। ट्रांसफ़ॉर्म तत्व के स्थान को रेंडरिंग के बाद बदलते हैं, इसलिए वे लेआउट को फिर से गणना करने का कारण नहीं बनते, जिससे वे एनिमेशन और ट्रांज़िशन के लिए प्रदर्शन-कुशल होते हैं।

सामान्य ट्रांसफ़ॉर्म फ़ंक्शन:

• translate(x, y) / translateX(x) / translateY(y): तत्व को क्षैतिज (x) और/या ऊर्ध्वाधर (y) रूप से स्थानांतरित करता है। मान लंबाई (px, em) या प्रतिशत (%) हो सकते हैं।
• scale(x, y) / scaleX(x) / scaleY(y): तत्व का आकार बदलता है। 1 डिफ़ॉल्ट आकार है, 1 से बड़ा मान बड़ा करता है, 1 से छोटा मान छोटा करता है। scale(2) तत्व को दोगुना बड़ा कर देगा।
• rotate(angle): तत्व को निर्दिष्ट कोण (deg, rad, turn) से घुमाता है। डिफ़ॉल्ट रूप से केंद्र के चारों ओर घूमता है।
• skew(x-angle, y-angle) / skewX(angle) / skewY(angle): तत्व को क्षैतिज (x) और/या ऊर्ध्वाधर (y) अक्षों पर तिरछा करता है।
• matrix(...): 2D ट्रांसफ़ॉर्म को सीधे मैट्रिक्स मानों का उपयोग करके परिभाषित करने की अनुमति देता है।

आप एक ही transform प्रॉपर्टी में कई ट्रांसफ़ॉर्म फ़ंक्शन को स्पेस से अलग करके लागू कर सकते हैं। क्रम महत्वपूर्ण है।

transform-origin प्रॉपर्टी उस बिंदु को सेट करती है जिसके चारों ओर ट्रांसफ़ॉर्म (जैसे रोटेशन, स्केलिंग) लागू होता है (डिफ़ॉल्ट 50% 50% या center center)।

उदाहरण: घुमाया और तिरछा किया गया बॉक्स।

ट्रांसफ़ॉर्म्ड

.transformed-element {

  width: 100px;

  height: 100px;

  background-color: #9b59b6; /* बैंगनी */

  border-radius: 5px;

  margin: 2em; /* जगह बनाने के लिए */

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  /* ट्रांसफ़ॉर्म लागू करें: 50px दाएं, 20 डिग्री घुमाएं, 1.1 गुना स्केल करें */

  transform: translateX(50px) rotate(20deg) scale(1.1);

  /* ट्रांसफ़ॉर्म का केंद्र बिंदु बदलें (ऊपरी बायां कोना) */

  /* transform-origin: 0 0; */

  /* ट्रांज़िशन के साथ जोड़ें */

  transition: transform 0.4s ease-out;

}

.transformed-element:hover {

  transform: translateX(0) rotate(0deg) scale(1); /* होवर पर वापस सामान्य */

}

3D ट्रांसफ़ॉर्म (translate3d, scale3d, rotate3d, perspective आदि) भी उपलब्ध हैं, जो गहराई और 3D प्रभाव जोड़ते हैं।

13. सीएसएस ब्राउज़र संगतता क्या है? (CSS Browser Compatibility)

सीएसएस ब्राउज़र संगतता (या क्रॉस-ब्राउज़र संगतता) यह सुनिश्चित करने की प्रक्रिया है कि आपकी वेबसाइट विभिन्न वेब ब्राउज़रों (जैसे Chrome, Firefox, Safari, Edge) और उनके विभिन्न संस्करणों पर अपेक्षित रूप से दिखती और काम करती है।

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

• लेआउट का टूटना।
• स्टाइल का लागू न होना।
• अलग-अलग दिखावट।

संगतता सुनिश्चित करने के तरीके:

• मानक सीएसएस का उपयोग करें: अच्छी तरह से समर्थित, मानक सीएसएस प्रॉपर्टीज़ और तकनीकों को प्राथमिकता दें।
• Can I use... जैसे संसाधनों का उपयोग करें: यह वेबसाइट जांचने की अनुमति देती है कि कौन सी सीएसएस (और अन्य वेब) सुविधाएँ विभिन्न ब्राउज़रों में समर्थित हैं।
• ब्राउज़र प्रीफ़िक्स का उपयोग करें (यदि आवश्यक हो): कुछ प्रायोगिक या नई सुविधाओं के लिए, ब्राउज़र विशिष्ट प्रीफ़िक्स (जैसे -webkit-, -moz-, -ms-) की आवश्यकता हो सकती है (अगला सेक्शन देखें)।
• फ़ीचर क्वेरीज़ (@supports) का उपयोग करें: यह जांचने के लिए कि क्या ब्राउज़र किसी विशेष सीएसएस सुविधा का समर्थन करता है, और यदि हाँ, तो संबंधित स्टाइल लागू करें।

  /* यदि ब्राउज़र display: grid का समर्थन करता है, तो ग्रिड स्टाइल लागू करें */
  
  @supports (display: grid) {
  
    .container {
  
      display: grid;
  
    }
  
  }
  
  /* यदि नहीं करता है, तो फ़ॉलबैक स्टाइल (जैसे फ्लोट या फ्लेक्सबॉक्स) लागू हो सकती है */
  
  @supports not (display: grid) {
  
    .container {
  
      /* फ़ॉलबैक लेआउट */
  
    }
  
  }

• टेस्टिंग: अपनी वेबसाइट का विभिन्न ब्राउज़रों और उपकरणों पर परीक्षण करें। ब्राउज़र डेवलपर टूल और ऑनलाइन क्रॉस-ब्राउज़र टेस्टिंग सेवाएं सहायक होती हैं।
• ग्रेसफुल डिग्रेडेशन / प्रोग्रेसिव एनहांसमेंट: ऐसी वेबसाइटें डिज़ाइन करें जो पुराने ब्राउज़रों में बुनियादी रूप से काम करें (ग्रेसफुल डिग्रेडेशन) या बुनियादी संस्करण से शुरू करें और आधुनिक ब्राउज़रों के लिए सुविधाएँ जोड़ें (प्रोग्रेसिव एनहांसमेंट)।

14. सीएसएस हैक और फ़िल्टर क्या होते हैं? (CSS Hacks & Filters)

सीएसएस हैक्स (CSS Hacks):

सीएसएस हैक्स कोड के टुकड़े होते हैं जिनका उपयोग विशिष्ट ब्राउज़रों (आमतौर पर पुराने या बग वाले संस्करण, जैसे पुराना इंटरनेट एक्सप्लोरर) को लक्षित करने के लिए किया जाता है ताकि उनकी रेंडरिंग समस्याओं को ठीक किया जा सके। ये अक्सर सीएसएस पार्सिंग में ब्राउज़र-विशिष्ट बग या क्वर्क्स का फायदा उठाते हैं।

उदाहरण (पुराने IE के लिए):

.myElement {

  color: blue; /* सभी ब्राउज़र */

  *color: red; /* IE7 और उससे नीचे */

  _color: green; /* IE6 और उससे नीचे */

}

चेतावनी: सीएसएस हैक्स का उपयोग आमतौर पर अनुशंसित नहीं किया जाता है। वे कोड को बनाए रखना मुश्किल बनाते हैं, भविष्य के ब्राउज़र संस्करणों में टूट सकते हैं, और अक्सर बेहतर विकल्प (जैसे फ़ीचर क्वेरीज़, ग्रेसफुल डिग्रेडेशन) उपलब्ध होते हैं। आधुनिक वेब विकास में उनका उपयोग बहुत कम हो गया है।

सीएसएस फ़िल्टर्स (CSS Filters):

filter प्रॉपर्टी तत्वों (आमतौर पर छवियों और वीडियो) पर ग्राफिकल प्रभाव लागू करने का एक तरीका है, जैसे कि वे फोटो एडिटिंग सॉफ़्टवेयर में लागू किए गए हों।

सामान्य फ़िल्टर फ़ंक्शन:

• blur(<length>): धुंधलापन लागू करता है।
• brightness(<percentage|number>): चमक समायोजित करता है।
• contrast(<percentage|number>): कंट्रास्ट समायोजित करता है।
• grayscale(<percentage|number>): तत्व को ग्रेस्केल में परिवर्तित करता है।
• sepia(<percentage|number>): सीपिया प्रभाव लागू करता है।
• saturate(<percentage|number>): संतृप्ति समायोजित करता है।
• hue-rotate(<angle>): रंग चक्र पर ह्यू रोटेशन लागू करता है।
• invert(<percentage|number>): रंगों को उलट देता है।
• opacity(<percentage|number>): पारदर्शिता समायोजित करता है ( opacity प्रॉपर्टी के समान)।
• drop-shadow(...): तत्व के पीछे ड्रॉप शैडो जोड़ता है ( box-shadow से भिन्न, यह सामग्री के आकार का अनुसरण करता है)।
• url(...): SVG फ़िल्टर लागू करने की अनुमति देता है।

आप एक ही filter प्रॉपर्टी में कई फ़िल्टर फ़ंक्शन को स्पेस से अलग करके लागू कर सकते हैं।

.filtered-image {

  /* 80% ग्रेस्केल, थोड़ा धुंधला, और थोड़ी अधिक चमक */

  filter: grayscale(80%) blur(1px) brightness(1.1);

  transition: filter 0.3s ease; /* होवर पर ट्रांज़िशन */

}

.filtered-image:hover {

  filter: none; /* होवर पर फ़िल्टर हटाएं */

}

15. सीएसएस में ब्राउज़र प्रीफ़िक्स कैसे उपयोग करें? (Using Browser Prefixes)

ब्राउज़र प्रीफ़िक्स (या वेंडर प्रीफ़िक्स) सीएसएस प्रॉपर्टीज़ या वैल्यूज़ के आगे जोड़े गए छोटे कीवर्ड होते हैं ताकि ब्राउज़र निर्माता प्रायोगिक या गैर-मानकीकृत सीएसएस सुविधाओं का परीक्षण और कार्यान्वयन कर सकें। जब कोई सुविधा मानक बन जाती है, तो प्रीफ़िक्स्ड संस्करणों को अंततः हटा दिया जाता है और मानक, अनप्रीफ़िक्स्ड संस्करण का उपयोग किया जाता है।

सामान्य प्रीफ़िक्स:

• -webkit-: Chrome, Safari, newer Opera, Edge, iOS ब्राउज़र (WebKit इंजन)
• -moz-: Firefox (Gecko इंजन)
• -ms-: Internet Explorer, पुराना Edge (Trident/EdgeHTML इंजन)
• -o-: पुराना Opera (Presto इंजन)

उपयोग का तरीका:

जब आप किसी ऐसी सीएसएस सुविधा का उपयोग करते हैं जिसके लिए प्रीफ़िक्स की आवश्यकता हो सकती है, तो आपको आमतौर पर पहले प्रीफ़िक्स्ड संस्करण और अंत में मानक संस्करण लिखना चाहिए।

.example {

  /* प्रीफ़िक्स्ड संस्करण */

  -webkit-transform: rotate(10deg); /* Chrome, Safari, etc. */

  -moz-transform: rotate(10deg);    /* Firefox */

  -ms-transform: rotate(10deg);     /* IE 9 */

  -o-transform: rotate(10deg);      /* Old Opera */

  /* मानक संस्करण (हमेशा अंत में) */

  transform: rotate(10deg);

}

आधुनिक अभ्यास:

आजकल, अधिकांश नई सीएसएस सुविधाएँ ब्राउज़रों में तेज़ी से मानकीकृत और समर्थित हो जाती हैं। प्रीफ़िक्स की आवश्यकता बहुत कम हो गई है। कई डेवलपर्स अब ऑटोप्रीफ़िक्सर (Autoprefixer) जैसे टूल का उपयोग करते हैं। ये टूल आपके सीएसएस कोड को पोस्ट-प्रोसेस करते हैं और Can I use... डेटाबेस के आधार पर स्वचालित रूप से आवश्यक प्रीफ़िक्स जोड़ देते हैं, आपके द्वारा लक्षित ब्राउज़र समर्थन के अनुसार। यह मैन्युअल रूप से प्रीफ़िक्स लिखने से कहीं अधिक कुशल और विश्वसनीय है।

16. बूटस्ट्रैप या टेलविंड सीएसएस क्या है? (What are Bootstrap or Tailwind CSS?)

बूटस्ट्रैप (Bootstrap) और टेलविंड सीएसएस (Tailwind CSS) दोनों लोकप्रिय सीएसएस फ्रेमवर्क (CSS Frameworks) हैं, लेकिन वे बहुत अलग दृष्टिकोण अपनाते हैं।

बूटस्ट्रैप (Bootstrap):

• दृष्टिकोण: कंपोनेंट-आधारित (Component-based)।
• क्या प्रदान करता है: पूर्व-डिज़ाइन किए गए और स्टाइल किए गए UI कंपोनेंट्स (जैसे बटन, कार्ड, नेवबार, मॉडल, फॉर्म), एक ग्रिड सिस्टम (पंक्तियों और कॉलमों पर आधारित), और कुछ जावास्क्रिप्ट प्लगइन्स।
• उपयोग: आप इन कंपोनेंट्स का उपयोग करने के लिए पूर्वनिर्धारित सीएसएस क्लास (जैसे .btn, .card, .container, .row, .col-md-6) अपने एचटीएमएल में जोड़ते हैं।
• फायदे: तेजी से प्रोटोटाइप और विकास, सुसंगत डिज़ाइन, व्यापक समुदाय और दस्तावेज़ीकरण।
• नुकसान: साइटें एक जैसी दिख सकती हैं यदि बहुत अधिक अनुकूलित न की जाएं, ओवरराइड करने के लिए अधिक सीएसएस लिखना पड़ सकता है, ब्लोटेड हो सकता है यदि सभी कंपोनेंट्स का उपयोग न किया जाए।

टेलविंड सीएसएस (Tailwind CSS):

• दृष्टिकोण: यूटिलिटी-फर्स्ट (Utility-first)।
• क्या प्रदान करता है: निम्न-स्तरीय यूटिलिटी क्लास का एक बड़ा सेट जो सीधे एचटीएमएल में स्टाइल लागू करने के लिए एकल सीएसएस प्रॉपर्टी (जैसे रंग, स्पेसिंग, फ़ॉन्ट आकार, फ्लेक्सबॉक्स) से मैप होता है। यह पूर्व-निर्मित कंपोनेंट प्रदान नहीं करता है।
• उपयोग: आप सीधे एचटीएमएल तत्वों पर कई यूटिलिटी क्लास (जैसे bg-blue-500, text-white, p-4, flex, items-center, rounded-lg) जोड़कर कस्टम डिज़ाइन बनाते हैं।
• फायदे: अत्यधिक अनुकूलन योग्य डिज़ाइन, सीएसएस लिखे बिना तेजी से UI बनाना, सुसंगत डिज़ाइन सिस्टम बनाए रखना आसान, उत्पादन में केवल उपयोग की गई स्टाइल शामिल होती हैं (पर्जिंग के साथ)।
• नुकसान: एचटीएमएल मार्कअप बहुत वर्बोस (verbose) हो सकता है, सीखने की अवस्था (सभी यूटिलिटी क्लास को जानना), पारंपरिक सीएसएस लिखने से अलग मानसिकता।

निष्कर्ष: बूटस्ट्रैप आपको तैयार कंपोनेंट देता है, जबकि टेलविंड आपको बिल्डिंग ब्लॉक्स (यूटिलिटी क्लास) देता है जिससे आप अपने खुद के कंपोनेंट बनाते हैं। चुनाव आपकी परियोजना की जरूरतों और व्यक्तिगत पसंद पर निर्भर करता है।

17. सीएसएस फ्रेमवर्क कैसे उपयोग करें? (How to Use CSS Frameworks?)

सीएसएस फ्रेमवर्क का उपयोग करने के सामान्य चरण:

1. चयन करें: अपनी परियोजना की आवश्यकताओं के लिए उपयुक्त फ्रेमवर्क चुनें (जैसे Bootstrap, Tailwind CSS, Foundation, Bulma)।
2. इंस्टॉलेशन/सेटअप:
   • CDN (Content Delivery Network): सबसे आसान तरीका। आप फ्रेमवर्क के दस्तावेज़ीकरण से सीएसएस (और कभी-कभी जावास्क्रिप्ट) फ़ाइल का लिंक प्राप्त करते हैं और उसे अपने एचटीएमएल के <head> सेक्शन में जोड़ते हैं। यह प्रोटोटाइप या छोटी परियोजनाओं के लिए अच्छा है।

     <!-- उदाहरण: Bootstrap CDN -->
     
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     
     <!-- उदाहरण: Tailwind CSS CDN (विकास के लिए, उत्पादन के लिए अनुशंसित नहीं) -->
     
     <script src="https://cdn.tailwindcss.com"></script>

   • पैकेज मैनेजर (NPM/Yarn): बड़ी परियोजनाओं के लिए अनुशंसित। आप फ्रेमवर्क को अपनी परियोजना में निर्भरता के रूप में स्थापित करते हैं (npm install bootstrap या npm install tailwindcss)। इसके लिए आमतौर पर एक बिल्ड प्रोसेस (जैसे Webpack, Vite) की आवश्यकता होती है ताकि सीएसएस को आपकी परियोजना में शामिल किया जा सके। टेलविंड के लिए, आपको इसे कॉन्फ़िगर करने और अपनी सीएसएस फ़ाइलों को प्रोसेस करने की भी आवश्यकता होगी।
   • डाउनलोड: आप फ्रेमवर्क की संकलित सीएसएस/जेएस फ़ाइलों को सीधे डाउनलोड कर सकते हैं और उन्हें अपनी परियोजना फ़ोल्डर में शामिल कर सकते हैं।
3. एचटीएमएल में क्लास लागू करें: फ्रेमवर्क के दस्तावेज़ीकरण का पालन करते हुए, अपने एचटीएमएल तत्वों में उपयुक्त क्लास जोड़ें।

   <!-- Bootstrap उदाहरण -->
   
   <button type="button" class="btn btn-primary">Primary Button</button>
   
   <div class="card" style="width: 18rem;">
   
     <div class="card-body">
   
       <h5 class="card-title">Card title</h5>
   
       <p class="card-text">Some quick example text.</p>
   
       <a href="#" class="btn btn-success">Go somewhere</a>
   
     </div>
   
   </div>
   
   <!-- Tailwind CSS उदाहरण -->
   
   <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
   
     Tailwind Button
   
   </button>
   
   <div class="max-w-sm rounded overflow-hidden shadow-lg bg-white p-6">
   
     <div class="font-bold text-xl mb-2">Tailwind Card</div>
   
     <p class="text-gray-700 text-base">
   
       This card is styled using utility classes.
   
     </p>
   
   </div>

4. अनुकूलन (Customization):
   • बूटस्ट्रैप: आप Sass वेरिएबल्स को ओवरराइड करके, कस्टम सीएसएस लिखकर, या थीम बिल्डर का उपयोग करके बूटस्ट्रैप को अनुकूलित कर सकते हैं।
   • टेलविंड: आप tailwind.config.js फ़ाइल के माध्यम से रंग पैलेट, स्पेसिंग स्केल, फ़ॉन्ट आदि को बड़े पैमाने पर अनुकूलित कर सकते हैं। आप @apply डायरेक्टिव का उपयोग करके कस्टम कंपोनेंट क्लास भी बना सकते हैं।
5. दस्तावेज़ीकरण पढ़ें: किसी भी फ्रेमवर्क का प्रभावी ढंग से उपयोग करने के लिए उसका दस्तावेज़ीकरण पढ़ना महत्वपूर्ण है।

18. सीएसएस फ्रेमवर्क के फायदे और नुकसान क्या हैं? (Pros & Cons of CSS Frameworks)

फायदे (Pros):

• तेज़ विकास (Faster Development): पूर्व-निर्मित कंपोनेंट्स या यूटिलिटी क्लास का उपयोग करके विकास प्रक्रिया को गति देते हैं।
• संगतता (Consistency): पूरी परियोजना में एक सुसंगत डिज़ाइन भाषा और UI पैटर्न बनाए रखने में मदद करते हैं।
• क्रॉस-ब्राउज़र संगतता (Cross-Browser Compatibility): फ्रेमवर्क आमतौर पर क्रॉस-ब्राउज़र मुद्दों को संभालने के लिए डिज़ाइन किए जाते हैं।
• उत्तरदायी डिज़ाइन (Responsive Design): अधिकांश फ्रेमवर्क उत्तरदायी ग्रिड सिस्टम और यूटिलिटीज़ के साथ आते हैं, जिससे विभिन्न स्क्रीन आकारों के लिए डिज़ाइन करना आसान हो जाता है।
• समुदाय और दस्तावेज़ीकरण (Community & Documentation): लोकप्रिय फ्रेमवर्क के पास बड़े समुदाय, व्यापक दस्तावेज़ीकरण और सीखने के संसाधन होते हैं।
• संरचना (Structure): परियोजना के सीएसएस के लिए एक संरचना और संगठन प्रदान करते हैं।

नुकसान (Cons):

• सीखने की अवस्था (Learning Curve): आपको फ्रेमवर्क के क्लास, कंपोनेंट्स और कार्यप्रणाली को सीखना होगा।
• ब्लोट/अतिरिक्त कोड (Bloat/Extra Code): यदि आप फ्रेमवर्क की सभी सुविधाओं का उपयोग नहीं करते हैं, तो आपकी अंतिम सीएसएस फ़ाइल में अप्रयुक्त कोड हो सकता है (हालांकि टेलविंड जैसे फ्रेमवर्क पर्जिंग के साथ इसे कम करते हैं)।
• सामान्य डिज़ाइन (Generic Look): विशेष रूप से कंपोनेंट-आधारित फ्रेमवर्क (जैसे बूटस्ट्रैप) के साथ, यदि पर्याप्त रूप से अनुकूलित न किया जाए तो साइटें एक जैसी दिख सकती हैं।
• ओवरराइडिंग स्टाइल्स (Overriding Styles): डिफ़ॉल्ट फ्रेमवर्क स्टाइल को ओवरराइड करने के लिए आपको अधिक विशिष्ट सीएसएस लिखने या !important का उपयोग करने की आवश्यकता हो सकती है।
• एचटीएमएल वर्बोसिटी (HTML Verbosity): यूटिलिटी-फर्स्ट फ्रेमवर्क (जैसे टेलविंड) के परिणामस्वरूप एचटीएमएल में बहुत सारी क्लास हो सकती हैं।
• निर्भरता (Dependency): आपकी परियोजना फ्रेमवर्क पर निर्भर हो जाती है।

फ्रेमवर्क का उपयोग करना है या नहीं, और कौन सा उपयोग करना है, यह परियोजना के आकार, टीम की परिचितता, आवश्यक अनुकूलन के स्तर और व्यक्तिगत पसंद पर निर्भर करता है।

19. सीएसएस में वेरिएबल कैसे उपयोग करें? (Using CSS Variables)

सीएसएस वेरिएबल्स, जिन्हें आधिकारिक तौर पर कस्टम प्रॉपर्टीज़ (Custom Properties) कहा जाता है, आपको सीएसएस में मानों को संग्रहीत करने और पुन: उपयोग करने की अनुमति देते हैं। यह कोड को अधिक रखरखाव योग्य (maintainable), पठनीय (readable) और लचीला (flexible) बनाता है, खासकर बड़े प्रोजेक्ट्स में।

वेरिएबल घोषित करना:

कस्टम प्रॉपर्टी नाम दो हाइफ़न (--) से शुरू होते हैं और केस-सेंसिटिव होते हैं। उन्हें आमतौर पर :root स्यूडो-क्लास के अंदर घोषित किया जाता है ताकि वे पूरे दस्तावेज़ में वैश्विक रूप से उपलब्ध हों, लेकिन आप उन्हें किसी विशिष्ट सेलेक्टर के अंदर भी स्कोप कर सकते हैं।

:root {

  /* वेरिएबल घोषित करना */

  --main-bg-color: #f0f0f0;

  --main-text-color: #333;

  --primary-accent-color: #007bff;

  --base-font-size: 16px;

  --default-padding: 15px;

}

.some-element {

    /* स्थानीय रूप से स्कोप्ड वेरिएबल */

    --element-specific-color: green;

}

वेरिएबल का उपयोग करना:

किसी वेरिएबल का मान एक्सेस करने के लिए var() फ़ंक्शन का उपयोग करें। आप var() फ़ंक्शन में एक दूसरा पैरामीटर प्रदान करके फ़ॉलबैक मान भी निर्दिष्ट कर सकते हैं, जिसका उपयोग तब किया जाएगा जब वेरिएबल परिभाषित न हो।

body {

  background-color: var(--main-bg-color);

  color: var(--main-text-color);

  font-size: var(--base-font-size);

}

a {

  color: var(--primary-accent-color);

}

.card {

  padding: var(--default-padding);

  background-color: white;

  border: 1px solid var(--main-text-color, black); /* फ़ॉलबैक मान 'black' */

}

.some-element {

    color: var(--element-specific-color);

}

फायदे:

• रखरखाव में आसानी (Maintainability): रंग पैलेट, फ़ॉन्ट आकार आदि जैसे मानों को एक ही स्थान पर अपडेट करें।
• पठनीयता (Readability): कोड अधिक वर्णनात्मक हो जाता है (var(--primary-accent-color) #007bff से अधिक अर्थपूर्ण है)।
• लचीलापन (Flexibility): जावास्क्रिप्ट का उपयोग करके सीएसएस वेरिएबल्स को गतिशील रूप से बदला जा सकता है, जिससे थीमिंग और रियल-टाइम स्टाइल अपडेट आसान हो जाते हैं।

सीएसएस वेरिएबल्स सभी आधुनिक ब्राउज़रों में अच्छी तरह से समर्थित हैं।

20. सीएसएस में फंक्शन कैसे उपयोग करें? (Using CSS Functions)

सीएसएस फ़ंक्शंस कीवर्ड होते हैं जिनके बाद कोष्ठक () होते हैं, और वे सीएसएस प्रॉपर्टीज़ के लिए मान उत्पन्न करने या संशोधित करने के लिए पैरामीटर स्वीकार करते हैं। हमने पहले ही कुछ देखे हैं (var(), rgb(), rgba(), url(), ट्रांसफ़ॉर्म फ़ंक्शंस जैसे rotate(), scale(), फ़िल्टर फ़ंक्शंस जैसे blur())।

कुछ अन्य उपयोगी सीएसएस फ़ंक्शंस:

• calc(): आपको सीएसएस मानों पर गणितीय गणना (जोड़, घटाव, गुणा, भाग) करने की अनुमति देता है। यह विभिन्न इकाइयों (जैसे px और %) को मिलाने के लिए विशेष रूप से उपयोगी है।

  .element {
  
    /* चौड़ाई = व्यूपोर्ट का 100% - 50 पिक्सेल */
  
    width: calc(100% - 50px);
  
    /* ऊंचाई = 100 व्यूपोर्ट ऊंचाई / 3 */
  
    height: calc(100vh / 3);
  
    /* पैडिंग = बेस पैडिंग वेरिएबल * 2 */
  
    padding: calc(var(--default-padding) * 2);
  
  }

• min(), max(), clamp(): उत्तरदायी डिज़ाइन के लिए बहुत उपयोगी हैं।
  • min(value1, value2, ...): प्रदान किए गए मानों में से सबसे छोटा मान चुनता है।
  • max(value1, value2, ...): प्रदान किए गए मानों में से सबसे बड़ा मान चुनता है।
  • clamp(MIN, VAL, MAX): एक मान को न्यूनतम (MIN) और अधिकतम (MAX) सीमा के बीच सीमित करता है। यह max(MIN, min(VAL, MAX)) के बराबर है।

  .responsive-width {
  
    /* चौड़ाई व्यूपोर्ट का 90% होगी, लेकिन 800px से अधिक नहीं */
  
    width: min(90vw, 800px);
  
  }
  
  .responsive-font-size {
  
    /* फ़ॉन्ट आकार व्यूपोर्ट चौड़ाई का 5% होगा, लेकिन कम से कम 16px */
  
    font-size: max(16px, 5vw);
  
  }
  
  .fluid-typography {
  
    /* फ़ॉन्ट आकार 1rem और 2rem के बीच रहेगा,
  
       वरीय मान 4vw है */
  
    font-size: clamp(1rem, 4vw, 2rem);
  
  }

• attr(): (वर्तमान में मुख्य रूप से content प्रॉपर्टी के साथ काम करता है) किसी तत्व के एट्रिब्यूट का मान प्राप्त करता है।

  a::after {
  
    /* लिंक के href एट्रिब्यूट को उसके बाद दिखाएं */
  
    content: " (" attr(href) ")";
  
  }

  <a href="https://example.com">Example Link</a>
  
  <!-- आउटपुट जैसा दिखेगा: Example Link (https://example.com) -->

• कलर फ़ंक्शंस: rgb(), rgba(), hsl(), hsla() रंग निर्दिष्ट करने के लचीले तरीके प्रदान करते हैं।

21. सीएसएस में मीडिया क्वेरी कैसे उपयोग करें? (Using Media Queries)

मीडिया क्वेरीज़ (Media Queries) सीएसएस का एक महत्वपूर्ण हिस्सा हैं जो आपको डिवाइस की विशेषताओं (जैसे व्यूपोर्ट चौड़ाई, ऊंचाई, ओरिएंटेशन, रिज़ॉल्यूशन) के आधार पर विभिन्न स्टाइल नियम लागू करने की अनुमति देती हैं। यह उत्तरदायी वेब डिज़ाइन (Responsive Web Design - RWD) की नींव है, जो सुनिश्चित करता है कि आपकी वेबसाइट विभिन्न उपकरणों (डेस्कटॉप, टैबलेट, फ़ोन) पर अच्छी दिखे और काम करे।

मीडिया क्वेरी @media नियम का उपयोग करके लिखी जाती है।

संरचना:

@media media-type and (media-feature: value) {

  /* स्टाइल नियम जो तब लागू होंगे जब शर्त पूरी होगी */

  selector {

    property: value;

  }

}

• media-type (वैकल्पिक): डिवाइस का प्रकार निर्दिष्ट करता है (जैसे all, print, screen)। यदि छोड़ा जाता है, तो डिफ़ॉल्ट all होता है। आमतौर पर वेब के लिए screen या all का उपयोग किया जाता है।
• media-feature: वह विशेषता जिसकी आप जांच कर रहे हैं (जैसे width, height, min-width, max-width, orientation)।
• value: मीडिया फ़ीचर का मान जिसके विरुद्ध जांच की जा रही है।
• and, not, only, , (OR): शर्तों को संयोजित करने के लिए लॉजिकल ऑपरेटर।

सामान्य उपयोग: व्यूपोर्ट चौड़ाई पर आधारित ब्रेकपॉइंट्स

सबसे आम उपयोग व्यूपोर्ट की चौड़ाई के आधार पर स्टाइल बदलना है। min-width (मोबाइल-फर्स्ट अप्रोच) या max-width (डेस्कटॉप-फर्स्ट अप्रोच) का उपयोग करके ब्रेकपॉइंट्स परिभाषित किए जाते हैं।

मोबाइल-फर्स्ट उदाहरण (Mobile-First Example): डिफ़ॉल्ट स्टाइल छोटी स्क्रीन के लिए होती हैं, और बड़ी स्क्रीन के लिए स्टाइल मीडिया क्वेरीज़ के अंदर जोड़ी जाती हैं।

/* डिफ़ॉल्ट (छोटी स्क्रीन) स्टाइल */

.container {

  width: 95%;

  margin: 0 auto;

}

.sidebar {

  display: none; /* छोटी स्क्रीन पर साइडबार छिपाएं */

}

.content {

  width: 100%;

}

/* टैबलेट और बड़ी स्क्रीन (600px और अधिक) */

@media screen and (min-width: 600px) {

  .container {

    display: flex;

    gap: 20px;

  }

  .sidebar {

    display: block; /* साइडबार दिखाएं */

    width: 30%;

    order: 1; /* साइडबार पहले */

  }

  .content {

    width: 70%;

    order: 2; /* कंटेंट बाद में */

  }

}

/* डेस्कटॉप (992px और अधिक) */

@media screen and (min-width: 992px) {

  .container {

    max-width: 960px; /* कंटेनर की अधिकतम चौड़ाई सेट करें */

  }

  .sidebar {

    width: 25%;

  }

  .content {

    width: 75%;

  }

}

/* प्रिंट स्टाइल */

@media print {

  body {

    font-family: serif;

    color: black;

  }

  a::after {

     content: " (" attr(href) ")"; /* प्रिंट में URL दिखाएं */

  }

  .sidebar, nav, footer {

    display: none; /* प्रिंट में अनावश्यक चीजें छिपाएं */

  }

}

मीडिया क्वेरीज़ आपको डिवाइस विशेषताओं के अनुकूल अत्यधिक लचीले और अनुकूलनीय लेआउट बनाने की शक्ति देती हैं।