परिचय CSS दो सिबलिंग कॉम्बिनेटर्स प्रदान करता है: एडजेसेंट सिबलिंग (+) और जनरल सिबलिंग (~)। दोनों समान पैरेंट के चाइल्ड एलिमेंट्स का चयन करते हैं लेकिन अलग-अलग दायरे के साथ। सिंटैक्स एडजेसेंट सिबलिंग कॉम्बिनेटर prev + next { property: value; } केवल तभी मेल खाता है जब next prev के **तुरंत बाद** आ

परिचय CSS चाइल्ड कॉम्बिनेटर (>) का उपयोग पैरेंट एलिमेंट के **सभी डायरेक्ट चाइल्ड एलिमेंट्स** का चयन करने के लिए किया जाता है। CSS डिसेंडेंट कॉम्बिनेटर (स्पेस) का उपयोग पैरेंट के **सभी डिसेंडेंट्स** (नेस्टेड लेवल पर कोई भी गहराई) का चयन करने के लिए किया जाता है। सिंटैक्स चाइल्ड कॉम्बिनेटर (डायरे

परिचय यदि हम किसी फोकस्ड एलिमेंट के पैरेंट को स्टाइल करना चाहते हैं, तो हम CSS :focus-within स्यूडो-क्लास का उपयोग करते हैं। यह फॉर्म और इंटरैक्टिव कंपोनेंट्स के लिए अत्यंत उपयोगी है। उदाहरण 1: फॉर्म फोकस स्टाइलिंग <!DOCTYPE html> <html> <head> <style> form { ma

परिचय CSS object-fit और object-position प्रॉपर्टीज हमें इमेज क्रॉप करने और यह निर्दिष्ट करने में मदद करती हैं कि यह किसी एलिमेंट में कैसे प्रदर्शित होती है। ये रिस्पॉन्सिव इमेज लेआउट के लिए आवश्यक हैं। सिंटैक्स selector { object-fit: /* value */; object-position: /* value */; } उदाहरण 1: कवर

परिचय हम data-* एट्रिब्यूट्स का उपयोग करके एलिमेंट्स के बारे में अतिरिक्त जानकारी संग्रहीत कर सकते हैं। ये कस्टम डेटा एट्रिब्यूट्स CSS सेलेक्टर्स (attr() फंक्शन के साथ) और जावास्क्रिप्ट दोनों के लिए सुलभ हैं। उदाहरण 1: जावास्क्रिप्ट इंटरैक्शन के लिए डेटा एट्रिब्यूट्स <!DOCTYPE html> <html

परिचय ब्राउज़र्स द्वारा प्रदान किए जाने वाले डिफ़ॉल्ट स्क्रॉल एंकरिंग व्यवहार को अक्षम करने के लिए, हम overflow-anchor प्रॉपर्टी का उपयोग कर सकते हैं। स्क्रॉल एंकरिंग स्वचालित रूप से स्क्रॉल स्थिति को समायोजित करता है जब ऊपर कंटेंट लोड होता है, जिससे उपयोगकर्ता की पढ़ने की स्थिति बनी रहती है। उदाह

परिचय CSS pointer-events प्रॉपर्टी का उपयोग करके, हम नियंत्रित कर सकते हैं कि कोई एलिमेंट माउस और टच इवेंट्स पर प्रतिक्रिया करता है या नहीं। यह ओवरले, डिसेबल्ड स्टेट्स, और जटिल लेयर्ड इंटरफेस के लिए उपयोगी है। सिंटैक्स pointer-events: auto | none; मान मान विवरण

परिचय सम्मिलन कैरेट (टेक्स्ट इनपुट में ब्लिंकिंग कर्सर) का रंग बदलने के लिए, CSS caret-color प्रॉपर्टी का उपयोग किया जाता है। यह फॉर्म एक्सेसिबिलिटी और दृश्य डिजाइन को बढ़ाता है। उदाहरण 1: कस्टम कैरेट रंग <!DOCTYPE html> <html> <head> <style> form { padding: 2%;

परिचय CSS tab-size प्रॉपर्टी हमें टैब में उपयोग होने वाले व्हाइटस्पेस की मात्रा सेट करने की अनुमति देती है। यह कोड डिस्प्ले, प्रीफॉर्मेटेड टेक्स्ट, और टैब कैरेक्टर्स वाले कंटेंट के लिए विशेष रूप से उपयोगी है। उदाहरण 1: बुनियादी टैब आकार तुलना <!DOCTYPE html> <html> <head> <s

परिचय CSS text-justify प्रॉपर्टी हमें किसी एलिमेंट के लिए जस्टिफिकेशन प्रकार निर्दिष्ट करने में मदद करती है। text-align प्रॉपर्टी किसी एलिमेंट में टेक्स्ट के क्षैतिज संरेखण को सेट करती है। साथ में, वे परिष्कृत टेक्स्ट लेआउट नियंत्रण प्रदान करते हैं। उदाहरण 1: इंटर-कैरेक्टर जस्टिफिकेशन <!DOCTYPE

परिचय CSS hyphens प्रॉपर्टी का उपयोग करके, हम निर्दिष्ट कर सकते हैं कि टेक्स्ट में हाइफ़न कैसे जोड़े जाएं। यह संकीर्ण कंटेनरों या जस्टिफाइड टेक्स्ट में टेक्स्ट रैपिंग में सुधार के लिए विशेष रूप से उपयोगी है। उदाहरण 1: मैनुअल बनाम कोई हाइफ़न नहीं <!DOCTYPE html> <html> <head> &l

परिचय CSS text-indent प्रॉपर्टी हमें टेक्स्ट को इंडेंट करने में उपयोग होने वाले व्हाइट स्पेस की मात्रा निर्दिष्ट करने की अनुमति देती है। यह आमतौर पर पैराग्राफ की पहली लाइन को इंडेंट करने के लिए उपयोग किया जाता है। उदाहरण 1: बेसिक पैराग्राफ इंडेंटेशन <!DOCTYPE html> <html> <head>

परिचय नए टेक्स्ट-डेकोरेशन प्रॉपर्टीज की शुरुआत के साथ, हम पहले से कहीं अधिक तरीकों से टेक्स्ट को स्टाइल कर सकते हैं। text-decoration अब text-decoration-thickness, text-decoration-color, text-decoration-line, और text-decoration-style के लिए शॉर्टहैंड है। text-decoration-skip, text-decoration-skip-in

परिचय किसी वेबपेज के टेक्स्ट और बैकग्राउंड रंग को बदलकर, हम अपनी वेबसाइट के लिए डार्क/लाइट मोड लागू कर सकते हैं। यह उपयोगकर्ता अनुभव को बेहतर बनाता है, खासकर कम रोशनी की स्थितियों में। बुनियादी सिंटैक्स डार्क मोड लागू करने के लिए निम्नलिखित CSS सिंटैक्स का उपयोग किया जा सकता है: selector { color

परिचय CSS overscroll-behavior प्रॉपर्टी का उपयोग करके हम वेबपेज की सीमा क्षेत्र (boundary area) को स्क्रॉल करने के व्यवहार को नियंत्रित कर सकते हैं। इस प्रॉपर्टी के माध्यम से मोबाइल ब्राउज़र पर पुल-टू-रिफ्रेश (pull-to-refresh) फीचर को अक्षम किया जा सकता है। सिंटैक्स Selector { overscroll-behavior:

नई CSS प्रॉपर्टीज़ और APIs डेवलपर्स को JavaScript और CSS के मिश्रण से वेबसाइट कस्टमाइज़ करने में मदद के लिए नई CSS प्रॉपर्टीज़ विकसित की गई हैं जो अब लोकप्रिय ब्राउज़र्स में सपोर्टेड हैं। कुछ नीचे सूचीबद्ध हैं: focus-within एलिमेंट्स के भीतर फोकस-एक्सेसिबिलिटी को हल करने का लक्ष्य। scroll-snap नेटि

:not() सूडो-क्लास CSS :not() सूडो-क्लास का उपयोग करके हम उन एलिमेंट्स को सिलेक्ट कर सकते हैं जिनमें कोई विशिष्ट मान नहीं है या जो किसी सिलेक्टर से मेल नहीं खाते। उदाहरण 1 <!DOCTYPE html> <html> <head> <style> p { background-color: cornflowerblue; color: white; } p:not(div>

position: sticky और top: 0 सेट करके, हम HTML टेबल में स्क्रॉल पर एक फिक्स्ड हेडर बना सकते हैं। उदाहरण 1 निम्न उदाहरण हमें इसका कार्यान्वयन करने का अंदाजा देते हैं: <!DOCTYPE html> <html> <head> <style> div {    color: white;    display: flex;    

प्सूडो-क्लास एक प्सूडो-क्लास सेलेक्टर की एक अवस्था को दर्शाता है जैसे :hover, :active, :last-child, आदि। ये सिंगल कोलन (:) से शुरू होते हैं। CSS प्सूडो-क्लास का सिंटैक्स निम्नानुसार है: :pseudo-class{ attribute: /*value*/ } प्सूडो-एलिमेंट इसी तरह, एक प्सूडो-एलिमेंट वर्चुअल एलिमेंट्स को चुनने के लिए

::placeholder प्सूडो-एलिमेंट का उपयोग करके, हम टेक्स्टबॉक्स के लिए प्लेसहोल्डर टेक्स्ट कलर बदल सकते हैं। CSS ::placeholder प्सूडो-एलिमेंट का सिंटैक्स निम्नानुसार है: ::placeholder { attribute: /*value*/ } उदाहरण 1 निम्न उदाहरण CSS :: placeholder प्सूडो-एलिमेंट को दर्शाते हैं। <!DOCTYPE html> &