आउटलाइन स्टाइल को ग्रूव के रूप में सेट करने के लिए, outline-style प्रॉपर्टी का उपयोग करें जिसका मान groove हो। ग्रूव के तहत, आउटलाइन ऐसा लगता है जैसे यह पेज में उकेरा गया हो। उदाहरण <html>    <head>    </head>    <body>       <p

परिचय `outline-style: ridge` आउटलाइन को 3D उभरी हुई (रिज) दिखाता है। `groove` का विपरीत। उदाहरण <html> <head> <style> .ridge-outline { outline-width: 3px; outline-style: ridge; outline-color: #888; padding: 20px;

परिचय `outline-style: solid` आउटलाइन को ठोस एकल रेखा बनाता है। उदाहरण <html> <head> <style> .solid-outline { outline-width: 3px; outline-style: solid; outline-color: #0066cc; padding: 20px; margin: 20px;

परिचय `padding-left` प्रॉपर्टी एलिमेंट के बाएं पैडिंग सेट करती है। लंबाई या प्रतिशत मान लेती है। सिंटैक्स padding-left: <length> | <percentage>; उदाहरण <html> <head> <style> .demo-box { border: 1px solid blue; margin: 10px 0;

परिचय `min-height` प्रॉपर्टी एलिमेंट की न्यूनतम ऊंचाई सेट करती है। कंटेंट कम होने पर भी यह ऊंचाई बनी रहती है। सिंटैक्स min-height: <length> | <percentage> | auto; उदाहरण <html> <head> <style> .min-height-box { width: 400px; min-heigh

परिचय `max-width` प्रॉपर्टी एलिमेंट की अधिकतम चौड़ाई सेट करती है। कंटेंट इससे चौड़ा नहीं होगा। सिंटैक्स max-width: <length> | <percentage> | none; उदाहरण <html> <head> <style> .limited-width { max-width: 100px; height: 200px;

परिचय `padding-bottom` प्रॉपर्टी एलिमेंट के नीचे पैडिंग (कंटेंट और निचले बॉर्डर के बीच की जगह) सेट करती है। सिंटैक्स padding-bottom: <length> | <percentage>; उदाहरण <html> <head> <style> .demo-box { border: 1px solid red; margin: 10

परिचय `padding-top` प्रॉपर्टी एलिमेंट के ऊपर पैडिंग (कंटेंट और ऊपरी बॉर्डर के बीच की जगह) सेट करती है। सिंटैक्स padding-top: <length> | <percentage>; उदाहरण <html> <head> <style> .demo-box { border: 2px solid orange; margin: 10px 0;

परिचय `outline-style: dotted` आउटलाइन को बिंदीदार रेखा बनाता है। आउटलाइन बॉर्डर के बाहर खींची जाती है और लेआउट को प्रभावित नहीं करती। सिंटैक्स outline-style: dotted; outline-width: 7px; /* वैकल्पिक: डॉट्स के बीच स्पेस प्रभावित करता है */ उदाहरण <html> <head> <style>

परिचय `padding-right` प्रॉपर्टी एलिमेंट के दाएं पैडिंग (कंटेंट और दाएं बॉर्डर के बीच की जगह) सेट करती है। सिंटैक्स padding-right: <length> | <percentage>; उदाहरण <html> <head> <style> .demo-box { border: 2px solid blue; margin: 10px

इंटरैक्टिव उदाहरण नीचे प्रत्येक div पर माउस होवर करके कर्सर बदलाव देखें: <html> <head> <style> .cursor-demo { display: inline-block; padding: 10px 20px; margin: 5px; border: 1px solid #ccc; background: #f5f5f5

परिचय `padding` शॉर्टहैंड प्रॉपर्टी एक साथ चारों तरफ (ऊपर, दाएं, नीचे, बाएं) पैडिंग सेट करती है। सिंटैक्स विविधताएं सिंटैक्समानलागू होता है 1 मान`padding: 25px;`चारों तरफ 25px 2 मान`padding: 20px 4%`ऊपर/नीचे 20px, दाएं/बाएं 4% 3 मान`padding: 15px 3% 10px`ऊपर 15px, दाएं/बाएं 3%, नीचे 10px 4 मान`

परिचय `cursor` प्रॉपर्टी माउस कर्सर का प्रकार निर्दिष्ट करती है जो एलिमेंट पर होवर होने पर दिखता है। सभी मान तालिका मानविवरणउपयोग autoब्राउज़र तय करता है (टेक्स्ट पर I-बीम, लिंक पर हैंड, आदि)डिफ़ॉल्ट defaultडिफ़ॉल्ट एरो कर्सररीसेट के लिए noneकोई कर्सर नहींगेम्स, कस्टम UI context-menuकॉन्टेक्स्ट

उत्तर CSS3 से इनपुट टेक्स्ट लंबाई सीमित नहीं की जा सकती। CSS प्रस्तुति (लुक) के लिए है, व्यवहार/कार्यक्षमता के लिए नहीं। सही तरीका: HTML maxlength एट्रिब्यूट <!DOCTYPE html> <html> <head> <title>HTML maxlength एट्रिब्यूट</title> </head> <body> <f

उत्तर CSS से फेविकॉन आकार सेट नहीं किया जा सकता। मानक CSS के माध्यम से फेविकॉन आयाम नियंत्रित करने का समर्थन नहीं करते। सही तरीका: HTML एट्रिब्यूट्स <!-- PNG फेविकॉन --> <link rel=icon type=image/png href=/favicon-16x16.png sizes=16x16> <link rel=icon type=image/png href=/favicon-32x

परिचय मुख्य कंटेंट क्षेत्र को व्यूपोर्ट ऊंचाई भरने के लिए, हेडर/फूटर के बाद शेष स्थान लेना। विधि 1: Absolute Positioning (पुराना लेकिन काम करता है) .mainbody { position: absolute; top: 60px; /* हेडर ऊंचाई */ bottom: 40px; /* फूटर ऊंचाई */ left: 0; right: 0; width: 1

समस्या CSS3 में **पैरेंट सेलेक्टर** नहीं है। पैरेंट को उसके चाइल्ड के आधार पर स्टाइल नहीं किया जा सकता। प्रस्तावित CSS4 समाधान /* CSS4 विषय चयनकर्ता ($) - अभी तक लागू नहीं */ ul $li ul.sub { ... } /* li जिसमें ul.sub है, उसे चुनें */ वर्तमान समाधान 1. JavaScript/jQuery (सबसे आम) { if (li.qu

परिचय `height` प्रॉपर्टी इमेज की ऊंचाई सेट करती है। मान लंबाई या प्रतिशत में हो सकता है। सिंटैक्स height: <length> | <percentage> | auto; उदाहरण <html> <head> <style> .fixed-height { height: 100px; border: 2px solid green; }

परिचय `border-collapse` प्रॉपर्टी टेबल सेल बॉर्डर्स के रेंडरिंग को नियंत्रित करती है: संयुक्त (`collapse`) या अलग (`separate`। मान मानव्यवहारडिफ़ॉल्ट separateप्रत्येक सेल का अपना बॉर्डर, अंतराल के साथहाँ collapseआसन्न सेल बॉर्डर्स साझा करते हैं, कोई अंतराल नहींनहीं दृश्य अंतर उदाहरण <ht

परिचय `padding-left` प्रॉपर्टी एलिमेंट के बाएं पैडिंग (कंटेंट और बॉर्डर के बीच की जगह) सेट करती है। सिंटैक्स padding-left: <length> | <percentage>; मान Length: px, em, rem, pt, cm, आदि (नकारात्मक नहीं) Percentage: कंटेनिंग ब्लॉक की चौड़ाई का प्रतिशत उदाहरण <html> <head>