:nth-last-of-type(n) सेलेक्टर का उपयोग :nth-last-of-type(n) सेलेक्टर का उपयोग पैरेंट एलिमेंट के अंदर अंतिम बच्चे से गिनती करके nth टाइप के एलिमेंट को सिलेक्ट करने के लिए किया जाता है। उदाहरण नीचे दिए गए उदाहरण में, पैरेंट के अंदर अंतिम से दूसरा <p> एलिमेंट (यानी 5 पैराग्राफ में से 4th) को स्ट

background-repeat: no-repeat का उपयोग बैकग्राउंड इमेज को केवल एक बार दिखाने और रिपीट होने से रोकने के लिए background-repeat: no-repeat; प्रॉपर्टी का उपयोग किया जाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> body { background-image: url("https:

background-image प्रॉपर्टी का डिफ़ॉल्ट व्यवहार डिफ़ॉल्ट रूप से, CSS में background-image प्रॉपर्टी का उपयोग करके सेट की गई इमेज क्षैतिज (horizontally) और लंबवत (vertically) दोनों दिशाओं में रिपीट होती है। इसे नियंत्रित करने के लिए background-repeat प्रॉपर्टी का उपयोग किया जाता है। उदाहरण नीचे दिए ग

translateY() मेथड का उपयोग translateY(y) मेथड का उपयोग करके किसी एलिमेंट को केवल y-axis (वर्टिकली) के साथ ट्रांसलेट किया जा सकता है। यह 2D ट्रांसफॉर्मेशन फंक्शन है। सिंटैक्स translateY(y) पैरामीटर y: ट्रांसलेटिंग वेक्टर का ऑर्डिनेट (y-निर्देशांक) दर्शाने वाली एक <length> वैल्यू। पॉजिटिव व

border-bottom-style प्रॉपर्टी का उपयोग किसी एलिमेंट के निचले बॉर्डर की स्टाइल सेट करने के लिए border-bottom-style प्रॉपर्टी का उपयोग किया जाता है। यह प्रॉपर्टी केवल बॉटम बॉर्डर को प्रभावित करती है। संभावित मान dotted - बिंदीदार बॉर्डर dashed - डैश्ड बॉर्डर solid - ठोस बॉर्डर double - डबल ब

CSS :focus सेलेक्टर का उपयोग :focus सेलेक्टर का उपयोग उस एलिमेंट को स्टाइल करने के लिए किया जाता है जिस पर वर्तमान में फोकस है। यह मुख्य रूप से फॉर्म एलिमेंट्स (जैसे <input>, <textarea>, <select>) और लिंक्स (<a>) पर लागू होता है जब वे कीबोर्ड नेविगेशन या माउस क्लिक के माध्यम

CSS3 में translate3d() मेथड का उपयोग translate3d(x, y, z) मेथड का उपयोग करके आप किसी HTML एलिमेंट को तीनों अक्षों (x, y, z) के साथ एक साथ ट्रांसलेट (स्थानांतरित) कर सकते हैं। यह 3D ट्रांसफॉर्मेशन का एक शक्तिशाली फंक्शन है जो एलिमेंट को 3D स्पेस में मूव करता है। सिंटैक्स translate3d(tx, ty, tz) पैर

:focus सिलेक्टर फोकस वाले एलिमेंट को सिलेक्ट करने के लिए :focus सिलेक्टर का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> input:focus { background-color: green; } </style> </head> <body> <form action=>

:hover सिलेक्टर CSS :hover सिलेक्टर का उपयोग माउस ओवर पर लिंक्स को स्टाइल करने के लिए किया जाता है। उदाहरण <!DOCTYPE html> <html> <head> <style> a:hover { background-color: orange; } </style> </head> <body> <a href=h

:valid सिलेक्टर वैलिड वैल्यू वाले सभी <input> एलिमेंट्स को स्टाइल करने के लिए CSS :valid सिलेक्टर का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> input:valid { background: red; color: white; } </style> </head

Z-axis रोटेशन CSS3 से Z-axis 3D ट्रांसफॉर्म लागू करने के लिए निम्न कोड चलाएं: उदाहरण <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black; } div#zDiv { -webkit-trans

3D ट्रांसफॉर्म 3D ट्रांसफॉर्म के साथ, हम एलिमेंट को x-axis, y-axis और z-axis पर घुमा सकते हैं। उदाहरण: x-axis 3D ट्रांसफॉर्म <html> <head> <style> div { width: 200px; height: 100px; background-color: pink; border: 1px solid black;

CSS बॉक्स मॉडल जब हम डिज़ाइन और लेआउट की बात करते हैं, तो इसे बॉक्स मॉडल कहा जाता है। HTML में सभी एलिमेंट्स को बॉक्स माना जाता है। CSS बॉक्स मॉडल में मार्जिन, बॉर्डर, पैडिंग, और कंटेंट शामिल होते हैं।

translateX() मेथड एलिमेंट को x-axis पर ट्रांसफॉर्म करने के लिए translateX(x) मेथड का उपयोग करें। सिंटैक्स translateX(x) यहां, x: ट्रांसलेटिंग वेक्टर का abscissa दर्शाने वाली लंबाई। उदाहरण div { width: 40px; height: 40px; background-color: black; } .trans { transform: translateX(20px); bac

white-space: nowrap एलिमेंट के अंदर टेक्स्ट रैपिंग अक्षम करने के लिए white-space प्रॉपर्टी को nowrap मान के साथ उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> p { white-space: nowrap; } </style> </head> <body>

निम्नलिखित उदाहरण कीफ्रेम्स सिंटैक्स के साथ ऊंचाई, चौड़ाई, रंग, नाम और एनिमेशन अवधि दिखाता है: उदाहरण <html>    <head>       <style type = "text/css">          h1 {             -moz-animation

CSS3 के साथ कीफ्रेम्स का उपयोग करके लेफ्ट मूविंग एनिमेशन बनाने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style type = "text/css">          h1 {             -moz-animation

CSS3 मल्टी कॉलम्स को सपोर्ट करता है ताकि टेक्स्ट को अखबार की संरचना के रूप में व्यवस्थित किया जा सके। सबसे अधिक उपयोग की जाने वाली मल्टी कॉलम प्रॉपर्टीज नीचे दिखाई गई हैं: मान विवरण column-count उन कॉलम्स की संख्या गिनने के लिए उपयोग किया जाता है जिनमें एलिमेंट विभाजित होना चाहिए column-fi

CSS3 मल्टी-कॉलम column-count प्रॉपर्टी का उपयोग उन कॉलम्स की संख्या गिनने के लिए किया जाता है जिनमें एलिमेंट विभाजित होना चाहिए। CSS का उपयोग करके column-count प्रॉपर्टी लागू करने के लिए निम्नलिखित कोड आज़माएं: उदाहरण <html>    <head>       <style>  

z-axis का उपयोग करके एलिमेंट को ट्रांसफॉर्म करने के लिए translateZ(z) मेथड का उपयोग करें। आइए सिंटैक्स देखें: translateZ(z) यहां, z: यह ट्रांसलेटिंग वेक्टर के z-component को दर्शाने वाली लंबाई है। आइए एक उदाहरण देखें: div {    width: 40px;    height: 40px;    backgroun