CSS :focus स्यूडो-क्लास अपने फोकस स्टेट में एक एलिमेंट को सेलेक्ट करता। यह तब होता है जब आप किसी एलिमेंट पर क्लिक करते हैं या टैब बटन से इसे सेलेक्ट करते हैं। :focus उस एलिमेंट के नाम के बाद आता है जिसे आप सेलेक्ट करना चाहते हैं। आप किसी एलिमेंट पर स्टाइल केवल तब लागू करना चाह सकते हैं जब उस पर वेब

ब्राउज़र CSS बॉक्स मॉडल का उपयोग यह निर्धारित करने के लिए करता है कि एक एलिमेंट को वेब पेज पर कैसे दिखना चाहिए। बॉक्स मॉडल एक एलिमेंट के आकार और उसके बॉर्डर, पैडिंग, और मार्जिन को दर्शाता है। आप इनमें से प्रत्येक एलिमेंट को व्यक्तिगत रूप से स्टाइल कर सकते हैं। हर एलिमेंट एक बॉक्स से घिरा होता है। य

CSS टैब्स संबंधित जानकारी को एक आसानी से नेविगेट करने योग्य स्थान पर प्रदर्शित करने में वास्तव में महान हैं। वे अनिवार्य रूप से टैब्ड डिवाइडर्स की तरह दिखते हैं जो आप एक रेसिपी बॉक्स या बाइंडर में देखते हैं। यहां टैब्ड नेविगेशन का उपयोग करने वाली वेबसाइटों के कुछ उदाहरण हैं: साउथवेस्ट एयरलाइंस य

CSS स्पेसिफिसिटी कॉन्सेप्ट न केवल थोड़ा सा टंग ट्विस्टर है (इसे तीन बार तेजी से कहने की कोशिश करें!), बल्कि यह थोड़ा माइंड बेंडर भी हो सकता है! यह CSS में समझने के लिए अधिक कठिन कॉन्सेप्ट्स में से एक है। इस लेख में, हम कवर करेंगे कि स्पेसिफिसिटी से हमारा क्या मतलब है, इसकी गणना कैसे की जाती है, और स

कर्सर द मदर ऑफ ऑल डेमोज के बाद से मौजूद हैं जहां डगलस एंगेलबर्ट ने सिक्सटीज के अंत में दुनिया को माउस और ग्राफिकल यूज़र इंटरफेस से परिचित कराया। माउस कर्सर हमें हमारे कंप्यूटर स्क्रीन पर स्पेस में हम कहां हैं यह देखने की अनुमति देता है। एक यूज़र एक्सपीरियंस टूल के रूप में, यह वास्तव में हमें यह दिखा

वेब डेवलपर्स CSS background-position प्रॉपर्टी का उपयोग तब करते हैं जब उन्हें उस बैकग्राउंड इमेज की शुरुआती स्थिति को एडजस्ट करने की आवश्यकता होती है जिस पर वे काम कर रहे हैं। इस लेख में, हम background-position प्रॉपर्टी पर एक नज़र डालेंगे और इसे कैसे एडजस्ट करें ताकि आपकी इमेज की स्थिति बदल जाए। स

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

कभी-कभी जब हम अपना CSS बनाते हैं, तो हम एक निश्चित एलिमेंट को टारगेट करना चाहते हैं। मान लीजिए अगर हमारे पास <div> टैग्स और <span> टैग्स से भरा एक HTML डॉक्यूमेंट है, लेकिन हम केवल प्रत्येक टाइप के पहले को टारगेट करके उसे किसी तरह स्टाइल करना चाहते हैं। हम इसे :first-of-type स्यूडो-क्लास

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

बूटस्ट्रैप कार्ड्स बूटस्ट्रैप कार्ड इसके सबसे लोकप्रिय कंपोनेंट्स में से एक है, और अच्छे कारण से। वे एक बहुत ही फ्लेक्सिबल मीडिया कंटेनर के रूप में काम करते हैं, और इनमें कुछ अच्छे प्रीसेट स्टाइलिंग और फॉर्मेटिंग होते हैं। कार्ड कंटेंट टेक्स्ट, इमेजेज, लिंक्स, बटन्स, लिस्ट्स कुछ भी हो सकता है, और

जब आपके UI को सबसे अलग दिखाने की बात आती है, तो सही कलर पैलेट चुनने जैसा कुछ नहीं होता। इस ट्यूटोरियल के साथ आप सीखेंगे कि एलिमेंट्स, फॉन्ट्स, और UI बनाते समय लगभग किसी भी चीज़ को कलर असाइन करना कितना आसान है। कलर जोड़ने के लिए, CSS में color डेटा टाइप होता है, जो स्टैंडर्ड रेड, ग्रीन, ब्लू (RGB) फ

आज हम एक सुसुवतारी को सेंटर करने की कोशिश करेंगे। इन छोटे जीवों को आमतौर पर सूट्स कहा जाता है और ये इधर-उधर घूमना पसंद करते हैं, इसलिए हमें इन्हें स्थिर रखकर सेंटर में लाना होगा ताकि हम इनकी तस्वीर ले सकें। चलिए शुरू करते हैं! नोट: पढ़ते समय, कृपया ब्लॉग के रिपॉजिटरी को भी देखें। HTML में इमेज जोड

CSS font-size प्रॉपर्टी आपके पेज या वेबसाइट पर किसी भी टेक्स्ट एलिमेंट का फ़ॉन्ट साइज़ सेट करती है। font-size प्रॉपर्टी को किसी भी क्लास, ID, या टेक्स्ट कंटेंट शामिल करने वाले एलिमेंट पर लागू किया जा सकता है। प्रॉपर्टी px, em, rem, vw, vh में मान और कीवर्ड्स का उपयोग करके स्वीकार करती है। फॉन्ट साइ

जब आप CSS के साथ अपना लेआउट डिज़ाइन कर रहे होते हैं, तो आप अक्सर एलिमेंट्स को ऊपर/नीचे या बाएं/दाएं पोजिशन करेंगे। z-index हमें Z-अक्ष पर तीसरे आयाम पर एलिमेंट्स को ले जाने की अनुमति देता है, एक स्टैकिंग प्रभाव के साथ (एक दूसरे के ऊपर)। z-index मान z-index प्रॉपर्टी या तो auto कीवर्ड या एक पूर्णांक

font-style CSS प्रॉपर्टी के साथ हम अपने फ़ॉन्ट को विशेषताओं के एक सेट के साथ स्टाइल कर सकते हैं ताकि हमारे टेक्स्ट पर जोर दिया जा सके। font-style सिंटैक्स और विकल्प font-style का उपयोग करते समय हमारे पास निम्नलिखित विकल्प हैं। ध्यान दें, उन सभी को कीवर्ड के रूप में निर्दिष्ट किया गया है। font-style

CSS background-image प्रॉपर्टी वेबसाइट के बैकग्राउंड को एक इमेज में बदलती है। बैकग्राउंड इमेज background-image: url(url_of_image) प्रॉपर्टी का उपयोग करके सेट की जाती है। आप background-image प्रॉपर्टी का उपयोग करके कई बैकग्राउंड इमेजेज निर्दिष्ट कर सकते हैं जो ओवरलैप होती हैं। बैकग्राउंड इमेज सेट कर

आइए आगे बढ़ें और कुछ मजेदार CSS शेप्स बनाएं! आयत और वर्ग (Rectangles and Squares) डिफ़ॉल्ट रूप से डिव एक वर्ग या आयत होता है जो चौड़ाई और ऊंचाई प्रॉपर्टीज पर निर्भर करता है। वर्ग की समान चौड़ाई और ऊंचाई होती है जबकि आयत की नहीं: .rectangle { width: 2rem; height: 4rem; background-color: violet; } .s

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

CSS सिलेक्टर्स वेब डेवलपर्स को वेब पेज पर किसी विशेष एलिमेंट या एलिमेंट्स के सेट पर स्टाइल लागू करने की अनुमति देते हैं। सिलेक्टर्स के साथ काम करते समय, आप तय कर सकते हैं कि आप केवल एक विशेष एट्रिब्यूट वाले एलिमेंट्स को टार्गेट करना चाहते हैं। यहीं पर CSS एट्रिब्यूट सिलेक्टर आता है। एट्रिब्यूट सिले

CSS लिखते समय, आप एक ऐसी स्थिति का सामना कर सकते हैं जहां आप पेज पर किसी एलिमेंट को कैसे संरेखित किया जाता है, इसे बदलना चाहेंगे। इस लेख में, हम CSS प्रॉपर्टी और उन प्रॉपर्टी मानों का पता लगाएंगे जो किसी एलिमेंट को लंबवत रूप से कैसे संरेखित किया जाता है, इसे बदल देंगे। सिंटैक्स vertical-align: prop