CSS `:not(:first-child) सिलेक्टर के साथ पहले को छोड़कर सभी HTML एलिमेंट्स को सिलेक्ट करना सीखें। यदि आप अपने CSS स्टाइलशीट में निम्नलिखित नियम-सेट जोड़ते हैं, तो आपकी पूरी वेबसाइट पर हर h2 एलिमेंट को 64px टॉप मार्जिन मिलेगा। h2 { margin-top: 64px; } लेकिन क्या होगा यदि आप अपनी वेबसाइट पर सामान्य रूप

इस बारे में जानें कि आप अपने अपरकेस टेक्स्ट एलिमेंट्स पर थोड़े लेटरस्पेसिंग का उपयोग करने से अक्सर लाभान्वित क्यों होंगे - और CSS के साथ इसे कैसे करें। टाइपोग्राफी में, जब आप टेक्स्ट एलिमेंट्स पर अपरकेस/ऑल कैप्स (कैपिटल लेटर्स) का उपयोग करते हैं तो आपको आमतौर पर अक्षरों के बीच थोड़ा ब्रीदिंग रूम जोड

कीफ्रेम्स और विभिन्न CSS एनिमेशन प्रॉपर्टीज़ का उपयोग करके शुद्ध CSS के साथ एक सिंपल एनिमेटेड बैकग्राउंड कलर लूप बनाना सीखें। इस उदाहरण में, हम HTML <body> एलिमेंट को सीधे CSS के साथ टारगेट कर रहे हैं, लेकिन आप निम्नलिखित कोड उदाहरण को किसी भी HTML एलिमेंट, क्लास, या आईडी पर लागू कर सकते हैं।

transform प्रॉपर्टी के ट्रांसफॉर्मेशन मेथड: scale() का उपयोग करके शुद्ध CSS के साथ होवर पर एलिमेंट्स को ज़ूम/स्केल-अप करना सीखें। होवर पर ज़ूम/स्केल-अप इस बॉक्स पर अपना माउस ले जाने का प्रयास करें: यह मूल आकार का ठीक 1.5 गुना स्केल करता है — इसलिए जब आप इसके ऊपर अपना माउस ले जाते हैं (होवर) तो यह 5

pointer-events प्रॉपर्टी का उपयोग करके विशिष्ट HTML एलिमेंट्स पर माउसओवर/होवर (:hover) इवेंट को हटाना/अनदेखा करना सीखें। मैं हाल ही में अपने एक क्लाइंट के लिए एक टीम गैलरी पेज बनाया। प्रत्येक गैलरी आइटम एक UI कार्ड द्वारा दर्शाया गया है जो एक ओवरले का उपयोग करता है जो आपके माउस को इसके ऊपर ले जाने प

कभी-कभी आपको इनलाइन CSS लिखने के लिए मजबूर किया जाता है, उदाहरण के लिए HTML ईमेल टेम्प्लेट्स में — आपके ईमेल/न्यूज़लेटर प्रदाता के आधार पर। लेकिन आप इनलाइन CSS के साथ होवर इफेक्ट कैसे प्राप्त करते हैं? आप नहीं कर सकते, लेकिन आप JavaScript के onMouseOver और onMouseOut मेथड का उपयोग करके वही होवर इफेक

कुछ CSS प्रॉपर्टीज़ जोड़कर अपने HTML pre टैग्स को 100% रिस्पॉन्सिव बनाने का त्वरित तरीका सीखें। एक समस्या जो मैं अक्सर अन्य ट्यूटोरियल वेबसाइट्स पर देखता हूं वह यह है कि लंबे कोड स्निपेट्स (जो pre टैग्स द्वारा लपेटे जाते हैं) पेज की चौड़ाई से बाहर निकल जाते हैं, और उनके पेज लेआउट को तोड़ देते हैं। ऐ

वीडियो से कोडपेन

आज आप सीखेंगे कि CSS एनिमेशन का उपयोग करके एरो SVG आइकन को ऊपर और नीचे बाउंस कैसे कराएं। आप कई CSS एनिमेशन प्रॉपर्टीज़ के साथ एनिमेशन टाइप, टाइमिंग, और अवधि को ट्वीक करना भी सीखेंगे। यह उपयोगी क्यों है? एनिमेशन, जब सही ढंग से किए जाते हैं, तो: अपने यूज़र्स को गाइड कर सकते हैं अपने यूज़र्स को कार्र

क्या आपने सोचा है कि कुछ ब्राउज़र कुछ वेबसाइट्स पर ऑटोफिल इनपुट फील्ड्स पर एक भयानक पीला बैकग्राउंड कलर क्यों जोड़ते हैं? मैं आपको बता नहीं सकता कि वे ऐसा क्यों करते हैं, लेकिन मैं आपको बताऊंगा कि इस पवित्रता से कैसे छुटकारा पाया जाए, तेजी से। आगे बढ़ने से पहले सुनिश्चित करें कि कोई बच्चे मौजूद नहीं

CSS के साथ किसी शब्द में पहले अक्षर को कैपिटलाइज़ करने के लिए, हम first-letter सिलेक्टर का उपयोग करते हैं: मान लीजिए आपके पास सभी लोअरकेस अक्षरों में एक हेडिंग है: <h2>this is a lowercase heading</h2> और आप this के t को अपरकेस बनाना चाहते हैं। बस अपने CSS स्टाइलशीट में h2 से first-letter

CSS के साथ एक पैराग्राफ टेक्स्ट ब्लॉक को सर्कुलर एलिमेंट के चारों ओर कैसे रैप करें। यदि आप अपनी कंटेंट प्रस्तुति को थोड़ा अधिक रोचक और मैगज़ीन जैसा बनाना चाहते हैं, तो आप CSS का उपयोग करके अपने टेक्स्ट को एलिमेंट्स के साथ दिलचस्प तरीकों से अलाइन और रैप कर सकते हैं। पहले कुछ HTML कंटेंट जोड़ते हैं: &

मान लीजिए आपके पास अंदर एक बटन के साथ एक फ्लेक्सबॉक्स कंटेनर है: <div class=container> <button class=button>Button</button> </div> यदि आप justify-content प्रॉपर्टी का उपयोग करके बटन (चाइल्ड एलिमेंट) को क्षैतिज रूप से सेंटर अलाइन करने का प्रयास करते हैं जैसे: .container { heig

CSS के साथ अपनी वेबसाइट पर YouTube वीडियो एम्बेड करना और इसे मोबाइल से डेस्कटॉप डिवाइस तक पूरी तरह से रिस्पॉन्सिव बनाना सीखें। यदि आप YouTube से एम्बेड वीडियो कोड कॉपी करते हैं तो आपको एक <iframe> रैपर मिलता है जो इसके समान दिखता है: <iframe width=560 height=315 src=https://www.youtube.com/

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

CSS प्रॉपर्टी list-style-type के साथ अनऑर्डर्ड लिस्ट पर स्क्वायर बुलेट पॉइंट्स बनाना सीखें। डिफ़ॉल्ट रूप से, वेब पेज पर अनऑर्डर्ड लिस्ट आइटम्स (<ul>) गोल बुलेट पॉइंट्स का उपयोग करते हैं। गोल बुलेट पॉइंट्स इस तरह स्टाइल किए जाते हैं: ul { list-style-type: disc; } और ऐसे दिखते हैं: HTML CSS Jav

CSS के साथ ऑर्डर्ड लिस्ट को अपरकेस रोमन नंबरों से स्टाइल करना सीखें। HTML में ऑर्डर्ड लिस्ट बनाने के लिए, आप उपयोग करते हैं: <ol> टैग अपने ऑर्डर्ड लिस्ट एलिमेंट को परिभाषित करने के लिए। <li> टैग अपने लिस्ट आइटम एलिमेंट्स को परिभाषित करने के लिए। उदाहरण: <ol> <li>List item&l

CSS के साथ ऑर्डर्ड लिस्ट को लोअरकेस रोमन नंबरों से स्टाइल करना सीखें। HTML में ऑर्डर्ड लिस्ट बनाने के लिए, आप उपयोग करते हैं: <ol> टैग अपने ऑर्डर्ड लिस्ट एलिमेंट को परिभाषित करने के लिए। <li> टैग अपने लिस्ट आइटम एलिमेंट्स को परिभाषित करने के लिए। उदाहरण: <ol> <li>List item&

CSS के साथ अपने वेबपेज लेआउट को सेंटर अलाइन करने के दो अलग-अलग तरीके सीखें। मान लीजिए आप अपनी वेबसाइट के लिए एक आर्टिकल लेआउट स्टाइल कर रहे हैं, और आप <article> एलिमेंट को अपने पेज के बीच में क्षैतिज रूप से सेंटर अलाइन करना चाहते हैं। आप इसे कुछ तरीकों से कर सकते हैं। क्षैतिज रूप से एलिमेंट्स

यदि आप अपनी वेबसाइट पर बैकग्राउंड के रूप में एक इमेज एम्बेड करने के लिए CSS प्रॉपर्टी background-image का उपयोग करते हैं, तो आपने गौर किया होगा कि आपकी इमेज आपके वेब पेज की चौड़ाई और ऊंचाई को भरने के लिए अनंत रूप से रिपीट होती है। ऐसा इसलिए होता है क्योंकि डिफ़ॉल्ट रूप से, ब्राउज़र्स में CSS प्रॉपर्