CSS Academy · पाठ

CSS Reset और Normalize

CSS resets और normalize stylesheets से ब्राउज़र की असंगत default styles हटाइए।

पाठ 4, कुल 4 में से13 चरण

CSS Reset और Normalize, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 4वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

समस्या: ब्राउज़र के असंगत डिफ़ॉल्ट

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

CSS रीसेट

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

<h1>Title</h1>
<p>Paragraph with reset margins.</p>
<ul><li>Item</li><li>Item</li></ul>
<ol><li>Step</li><li>Step</li></ol>

CSS सामान्यीकरण

Normalize.css एक अलग तरीका अपनाता है: सभी डिफ़ॉल्ट हटाने के बजाय, यह ब्राउज़र के डिफ़ॉल्ट को सुसंगत बनाता है और उपयोगी डिफ़ॉल्ट, जैसे शीर्षक आकार, बनाए रखते हुए ज्ञात बग ठीक करता है।

रीसेट बनाम सामान्यीकरण: समझौते

तुलना:

रीसेट: खाली आधार, सब कुछ आपको परिभाषित करना होता है, अधिक काम
सामान्यीकरण: उपयोगी डिफ़ॉल्ट बनाए रखते हुए सुसंगत आधार, कम कस्टम कोड

आधुनिक CSS रीसेट

एक लोकप्रिय आधुनिक रीसेट (जोश कमो द्वारा) सबसे प्रभावशाली डिफ़ॉल्ट को लक्षित करता है:

<h1>Reset Demo</h1><h2>Sub</h2><h3>Sub</h3><h4>Sub</h4><h5>Sub</h5><h6>Sub</h6>
<p>Body text with smooth font rendering.</p>
<picture><img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><rect width='300' height='120' fill='%234f8fdb'/></svg>" alt="demo" /></picture>
<video controls></video>
<canvas></canvas>
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><circle cx="20" cy="20" r="18" fill="tomato"/></svg>

छवियों को ब्लॉक बनाना

छवियों को display: block बनाने से कंटेनरों के अंदर छवियों के नीचे डिफ़ॉल्ट इनलाइन अंतराल हट जाता है (जो line-height के कारण बनता है):

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='160'><rect width='400' height='160' fill='%23ff6347'/></svg>" alt="block image" />

सूची रीसेट पैटर्न

कस्टम नेविगेशन या यूआई सूचियों को स्टाइल करते समय सूची चिह्न और इंडेंटेशन हटाएँ:

<ul class="nav-list"><li>Home</li><li>Shop</li><li>About</li></ul>

फ़ॉर्म एलिमेंट रीसेट

कई ब्राउज़र में फ़ॉर्म एलिमेंट (input, button, textarea) डिफ़ॉल्ट रूप से फ़ॉन्ट इनहेरिट नहीं करते। एक सामान्य समाधान यह है:

<input type="text" placeholder="Name" />
<button>Submit</button>
<textarea placeholder="Message"></textarea>
<select><option>Choice A</option></select>

टेलविंड का प्रीफ़्लाइट

Tailwind CSS में अपना रीसेट प्रीफ़्लाइट शामिल होता है, जो modern-normalize पर आधारित है। यदि आप Tailwind का उपयोग करते हैं, तो आपके पास पहले से ही स्वचालित रूप से लागू रीसेट मौजूद है।

रीसेट कहाँ रखें

अपनी रीसेट/सामान्यीकरण स्टाइलशीट को हमेशा किसी भी कॉम्पोनेंट या यूटिलिटी शैलियों से पहले रखें। कैस्केड क्रम यह सुनिश्चित करता है कि आपकी शैलियाँ विशिष्टता संबंधी टकराव के बिना रीसेट को ओवरराइड करें।

कस्टम रीसेट संबंधी विचार

किसी पूर्ण तृतीय-पक्ष रीसेट को शामिल करने के बजाय अपने प्रोजेक्ट के अनुसार बनाया गया छोटा रीसेट तैयार करें। CSS पेलोड को छोटा रखने के लिए केवल आवश्यक नियम शामिल करें।

<p>Base font-size and line-height set on the root element affect the whole page.</p>

त्वरित जाँच

CSS रीसेट और CSS सामान्यीकरण के बीच मुख्य अंतर क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

ब्राउज़र की डिफ़ॉल्ट शैलियाँ असंगत होती हैं। CSS रीसेट सभी डिफ़ॉल्ट हटा देता है; normalize.css उन्हें सुसंगत बनाता है। आधुनिक रीसेट box-sizing: border-box, अधिकतम-चौड़ाई वाली छवियों और फ़ॉर्म एलिमेंट्स के इनहेरिट किए गए फ़ॉन्ट जैसी सबसे प्रभावशाली प्रॉपर्टीज़ पर ध्यान देते हैं। रीसेट को हमेशा पहले लोड करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “CSS Reset और Normalize” पाठ निःशुल्क है?

हाँ—“CSS Reset और Normalize” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“CSS Reset और Normalize” में मैं क्या सीखूँगा?

CSS resets और normalize stylesheets से ब्राउज़र की असंगत default styles हटाइए। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“CSS Reset और Normalize” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ