लोड हो रहा है...

CSS Properties Complete Reference

यह CSS Properties Complete Reference गाइड वेब डेवलपर्स के लिए डिज़ाइन किया गया है ताकि वे सभी CSS प्रॉपर्टीज़ का त्वरित और आसान संदर्भ पा सकें। इस गाइड का उद्देश्य कोडिंग के दौरान तेज़ी से प्रॉपर्टी सिंटैक्स, उपयोग और ब्राउज़र सपोर्ट की जानकारी प्रदान करना है। इसमें लेआउट, बॉक्स मॉडल, बॉर्डर, बैकग्राउंड, टाइपोग्राफी, फ्लेक्सबॉक्स, ग्रिड और अन्य सभी प्रमुख CSS प्रॉपर्टीज़ शामिल हैं। डेवलपर्स इसे अपने कोडिंग प्रैक्टिस के दौरान रिफरेंस के रूप में इस्तेमाल कर सकते हैं और नए या जटिल प्रॉपर्टीज़ के व्यवहार को समझ सकते हैं।

📊 Layout & Positioning Properties

Property Syntax Description Example Browser Support
display display: value एलिमेंट का डिस्प्ले टाइप नियंत्रित करता है display: flex All browsers
position position: value पोजिशनिंग मेथड सेट करता है position: absolute All browsers
top top: value ऊर्ध्वाधर स्थिति ऑफसेट top: 10px All browsers
right right: value दाईं ओर से स्थिति right: 20px All browsers
bottom bottom: value नीचे से स्थिति bottom: 10px All browsers
left left: value बाईं ओर से स्थिति left: 20px All browsers
z-index z-index: number स्टैकिंग ऑर्डर नियंत्रित करता है z-index: 999 All browsers
float float: value एलिमेंट का फ्लोट दिशा float: left All browsers
clear clear: value फ्लोटिंग एलिमेंट्स को क्लियर करता है clear: both All browsers
overflow overflow: value कंटेंट ओवरफ्लो हैंडलिंग overflow: hidden All browsers
overflow-x overflow-x: value क्षैतिज ओवरफ्लो overflow-x: scroll All browsers
overflow-y overflow-y: value ऊर्ध्वाधर ओवरफ्लो overflow-y: auto All browsers
visibility visibility: value एलिमेंट दृश्यता visibility: hidden All browsers
clip clip: rect() कंटेंट क्लिप करता है clip: rect(0,50px,50px,0) All browsers
vertical-align vertical-align: value ऊर्ध्वाधर संरेखण vertical-align: middle All browsers

📊 Box Model Properties

Property Syntax Description Example Browser Support
width width: value एलिमेंट की चौड़ाई width: 300px All browsers
height height: value एलिमेंट की ऊंचाई height: 200px All browsers
max-width max-width: value अधिकतम चौड़ाई max-width: 100% All browsers
min-width min-width: value न्यूनतम चौड़ाई min-width: 200px All browsers
max-height max-height: value अधिकतम ऊंचाई max-height: 500px All browsers
min-height min-height: value न्यूनतम ऊंचाई min-height: 100px All browsers
margin margin: value बाहरी अंतराल margin: 20px All browsers
margin-top margin-top: value ऊपरी मार्जिन margin-top: 10px All browsers
margin-right margin-right: value दाईं मार्जिन margin-right: 15px All browsers
margin-bottom margin-bottom: value नीचे मार्जिन margin-bottom: 10px All browsers
margin-left margin-left: value बाईं मार्जिन margin-left: 15px All browsers
padding padding: value आंतरिक अंतराल padding: 15px All browsers
padding-top padding-top: value ऊपरी पैडिंग padding-top: 10px All browsers
padding-right padding-right: value दाईं पैडिंग padding-right: 20px All browsers
padding-bottom padding-bottom: value नीचे पैडिंग padding-bottom: 10px All browsers
padding-left padding-left: value बाईं पैडिंग padding-left: 20px All browsers
box-sizing box-sizing: value बॉक्स मॉडल कैलकुलेशन box-sizing: border-box IE8+

📊 Border & Outline Properties

Property Syntax Description Example Browser Support
border border: width style color पूर्ण बॉर्डर border: 2px solid #000 All browsers
border-width border-width: value बॉर्डर मोटाई border-width: 3px All browsers
border-style border-style: value बॉर्डर स्टाइल border-style: dashed All browsers
border-color border-color: value बॉर्डर रंग border-color: red All browsers
border-top border-top: width style color ऊपरी बॉर्डर border-top: 1px solid blue All browsers
border-right border-right: width style color दाईं बॉर्डर border-right: 2px dotted red All browsers
border-bottom border-bottom: width style color नीचे बॉर्डर border-bottom: 3px double green All browsers
border-left border-left: width style color बाईं बॉर्डर border-left: 1px solid gray All browsers
border-radius border-radius: value गोल कोने border-radius: 10px IE9+
outline outline: width style color एलिमेंट आउटलाइन outline: 2px solid red All browsers

📊 Background Properties

Property Syntax Description Example Browser Support
background background: color image repeat position size पूर्ण बैकग्राउंड background: #fff url() no-repeat center All browsers
background-color background-color: value बैकग्राउंड रंग background-color: #ff0000 All browsers
background-image background-image: url() बैकग्राउंड इमेज background-image: url('bg.jpg') All browsers
background-repeat background-repeat: value इमेज रिपीट background-repeat: no-repeat All browsers
background-position background-position: value इमेज पोजिशन background-position: center top All browsers
background-size background-size: value इमेज स्केलिंग background-size: cover IE9+

📊 Typography Properties

Property Syntax Description Example Browser Support
font font: style variant weight size/height family पूर्ण फॉन्ट font: bold 16px/1.5 Arial All browsers
font-family font-family: name फॉन्ट टाइप font-family: 'Arial', sans-serif All browsers
font-size font-size: value टेक्स्ट साइज font-size: 18px All browsers
font-weight font-weight: value टेक्स्ट मोटाई font-weight: bold All browsers
line-height line-height: value लाइन हाइट line-height: 1.6 All browsers
text-align text-align: value क्षैतिज संरेखण text-align: center All browsers
text-decoration text-decoration: value टेक्स्ट डेकोरेशन text-decoration: underline All browsers

📊 Flexbox Properties

Property Syntax Description Example Browser Support
display display: flex फ्लेक्सबॉक्स सक्षम करें display: flex IE10+
flex-direction flex-direction: value मुख्य अक्ष दिशा flex-direction: column IE10+
justify-content justify-content: value मुख्य अक्ष संरेखण justify-content: space-between IE10+
align-items align-items: value क्रॉस अक्ष संरेखण align-items: center IE10+

📊 Grid Properties

Property Syntax Description Example Browser Support
display display: grid ग्रिड सक्षम करें display: grid IE10+ (-ms-)
grid-template-columns grid-template-columns: values कॉलम साइज grid-template-columns: 1fr 2fr IE10+ (-ms-)
grid-template-rows grid-template-rows: values रो साइज grid-template-rows: 100px auto IE10+ (-ms-)
grid-gap grid-gap: row column आइटम्स के बीच गैप grid-gap: 20px 10px IE10+ (-ms-)

Quick Examples

css
CSS Code 
/* Layout Example */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}

/* Typography Example */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Animation Example */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}

---
  • हमेशा font-family में fallback fonts का उल्लेख करें।
  • बेहतर रिस्पॉन्सिवनेस के लिए relative units (em, rem, %) का उपयोग करें।
  • !important के उपयोग को न्यूनतम रखें।
  • CSS प्रॉपर्टीज़ को विभिन्न ब्राउज़रों में टेस्ट करें, विशेष रूप से नई प्रॉपर्टीज़।
  • संक्षिप्त प्रॉपर्टीज़ का उपयोग करें ताकि फ़ाइल आकार कम हो।
  • जटिल एनिमेशन और फिल्टर्स के प्रदर्शन प्रभाव को ध्यान में रखें।
  • CSS को ऑनलाइन वेलिडेटर्स से वेलिडेट करें।
  • CSS custom properties (variables) का उपयोग करें ताकि कोड maintainable रहे।
  • एक्सपेरिमेंटल प्रॉपर्टीज़ के लिए vendor prefixes शामिल करें।
  • संबंधित प्रॉपर्टीज़ को एक साथ ग्रुप करें।

🧠 अपने ज्ञान की परीक्षा करें

शुरू करने के लिए तैयार

Reference Knowledge Check

CSS प्रॉपर्टीज़ और उनके उपयोग का ज्ञान जांचें।

❓
3
प्रश्न
🎯
70%
पास करने के लिए
♾️
∞
समय
🔄
∞
प्रयास

📝 निर्देश

  • हर प्रश्न को ध्यान से पढ़ें
  • हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
  • आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
  • आपकी प्रगति शीर्ष पर दिखाई जाएगी
विषय 60 का 65
Css ट्यूटोरियल