Combining W3.CSS with custom CSS In Hindi
एक कम्पलीट एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन डेवलप करने के लिए W3.CSS फ्रेमवर्क एक लाइब्रेरी है, जो हमें वेबपेज लेआउट, फॉर्म बटन, मल्टीप्ल कार्ड ब्लॉक, स्पेसिफिक कलर और रिस्पॉन्सिव वेबसाइट डिज़ाइन करने के लिए कई रेडी-मेड स्टाइल और सीसीएसएस क्लास प्रोवाइड करता है। जिससे एक एचटीएमएल वेब डेवलपर अपनी वेबसाइट का डिफ़ॉल्ट बोरिंग लुक, अपीयरेंस, और उसके बिहैवियर, को अपने अनुसार कस्टमाइज़ कर सकते हैं। यह सबकुछ एक सामान्य एचटीएमएल वेबपेज में W3.CSS स्टाइलशीट लाइब्रेरी को अपने कस्टम सीसीएसएस कोड के साथ अप्लाई कर किया जा सकता है।
W3.CSS allows us to do the following in a single custom CSS code.
- हम एक कस्टम सीसीएसएस कोड को ऐड कर मौजूदा एचटीएमएल वेबपेज में कलर और फ़ॉन्ट को चेंज कर सकते है।
- एक कस्टम सीसीएसएस कोड को ऐड कर मौजूदा एचटीएमएल वेबपेज में टेक्स्ट, लाइन, पैराग्राफ स्पेसिंग और टेक्स्ट के साइज़ को मॉडिफाई कर कर सकते है।
- ज़रूरत पड़ने पर मौजूदा एचटीएमएल वेबपेज में W3.CSS स्टाइल को ओवरराइड कर सकते है।
- मौजूदा एचटीएमएल वेबपेज में W3.CSS कंपोनेंट लाइब्रेरी को यूज़ करते हुए हम एक यूनिक डिज़ाइन क्रिएट कर सकते है।
Steps for integrating custom CSS into the W3.CSS framework library.
Step 1 – Include W3.CSS framework library in an HTML webpage.
अपने एचटीएमएल वेबपेज में W3.CSS फ्रेमवर्क क्लासेज लाइब्रेरी को <head> सेक्शन के अंदर W3.CSS स्टाइलशीट को मैन्युअली निचे दिए लिंक के अनुसार ऐड करे।
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/5/w3.css”>
Step 2 – Add your custom CSS code to your HTML webpage.
यहाँ अपने एचटीएमएल वेबपेज में W3.CSS लिंक को ऐड करने के बाद वेब डेवलपर अपना एक कस्टम सीसीएसएस कोड को इन्सर्ट करे. जिससे कि आपकी वेबपेज स्टाइल ज़रूरत के अनुसार W3.CSS लाइब्रेरी को ओवरराइड कर सकें।
<style>
body {
background-color: #ffff343f;
font-family: times, sans-serif;
}
.custom-title {
color: yellow;
text-align: center;
}
.custom-button {
background-color: aqua !important;
color: red !important;
border-radius: 20px;
}
</style>
Remember : कभी कभी W3.CSS में डिज़ाइन एचटीएमएल वेबपेज में !important स्टेटमेंट का यूज़ W3.CSS में पहले से डिफाइन फिक्स स्टाइल को ओवरराइड करने में किया जाता है। W3.CSS वेब डेवलपर !important स्टेटमेंट का यूज़ सिर्फ़ तभी करें जब यह बहुत ही ज़रूरी हो।
Example of custom CSS code with a W3.CSS framework library.
<!DOCTYPE html>
<html>
<head>
<title>Let’s explore W3.CSS framework with Custom CSS example</title>
<!– here we add W3.CSS link component library –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/5/w3.css”>
<!– here we add a user define Custom CSS code –>
<style>
body {
background-color: #fabc34;
font-family: times;
}
.custom-title {
color: white;
text-align: center;
}
.custom-button {
background-color: red !important;
color: white !important;
border-radius: 20px;
}
</style>
</head>
<body>
<div class=”w3-container w3-lime”>
<h2 class=”custom-title”>Lets Try W3.CSS Component </h2>
</div>
<div class=”w3-container w3-padding”
<p>Here we create a custom html webpage with W3.CSS and custom CSS.</p>
<button class=”w3-button custom-button”>
Submit
</button>
<button class=”w3-button custom-button”>
Reset
</button>
</div>
</body>
</html>
How to use custom CSS code with a W3.CSS framework library.
- सबसे पहले अपने मौजूदा एचटीएमएल वेबपेज में W3.CSS लिंक को लोड करें, फिर अपना एक कस्टम स्टाइलशीट या <style> ब्लॉक को डिफाइन कर सीसीएसएस कोड को लिखे।
- मौजूदा एचटीएमएल वेबपेज में लिंक्ड W3.CSS कम्पोनेंट लाइब्रेरी को डायरेक्ट मॉडिफाई करने के बदले अपनी एक सीसीएसएस क्लास को क्रिएट करे।
- याद रहे, एक सामान्य एचटीएमएल वेबपेज में !important स्टेटमेंट का ज़्यादा यूज़ न करें, क्योंकि इससे कुछ कस्टम सीसीएसएस स्टाइल को मेन्टेन करना अधिक काम्प्लेक्स हो सकता है।
- अपने मौजूदा एचटीएमएल वेबपेज में .custom-button या .main-title जैसे काम के क्लास नामों को अप्लाई करें।
- लार्ज लेवल एचटीएमएल वेबपेज वेबसाइट प्रोजेक्ट्स के लिए एक कस्टम सीसीएसएस को एक अलग फ़ाइल (जैसे, style.css) में सोर्स कोड को क्रिएट कर ऑर्गनाइज़ रखें।
Advantages of combining W3.CSS framework library components with custom CSS.
- किसी एचटीएमएल वेबपेज में एक कस्टम सीसीएसएस पहले से बने सीसीएसएस कंपोनेंट्स का यूज़ करके हम एक फ़ास्ट रेस्पॉन्सिव वेब डेवलपमेंट कर सकते है।
- कस्टम सीसीएसएस वेब डेवलपर को एक यूनिक वेबसाइट डिज़ाइन डेवलप करने के मल्टीप्ल फीचर्स प्रोवाइड करता है।
- एक एचटीएमएल वेबपेज में किसी कस्टम सीसीएसएस को इजीली इम्प्लीमेंट मेंटेनेंस और कस्टमाइज़ेशन करना एक सिंपल मेथड है।
- वेब डेवलपर अपनी कुछ पर्सनलाइज़्ड सीसीएसएस स्टाइलिंग के साथ W3.CSS लाइब्रेरी कॉम्पोनेन्ट से एक रिस्पॉन्सिव वेबपेज लेआउट डेवलप कर सकते है।
- W3.CSS लाइब्रेरी कॉम्पोनेन्ट से वेब डेवलपर को स्टार्ट से सीसीएसएस सोर्स कोड लिखने के लिए ज़रूरी सीसीएसएस की क्वांटिटी कम हो जाती है।
A Summary of Combining W3.CSS with Custom CSS.
- W3.CSS फ्रेमवर्क लाइब्रेरी को एक कस्टम सीसीएसएस के साथ मर्ज कर ऐड करने से वेब डेवेलपर को दोनों के एडवांटेज मिलते हैं.
- किसी यूजर डिफाइन एचटीएमएल वेबपेज में W3.CSS फ्रेमवर्क लाइब्रेरी आपको रिस्पॉन्सिव वेबपेज लेआउट और रेडी-मेड UI कंपोनेंट्स प्रोवाइड करता है।
- W3.CSS फ्रेमवर्क लाइब्रेरी में एक कस्टम सीसीएसएस वेब डेवलपर को वेबपेज एलिमेंट कलर, टेक्स्ट फ़ॉन्ट, पैराग्राफ स्पेसिंग, बॉर्डर और अन्य वेब कॉम्पोनेन्ट को डिज़ाइन एलिमेंट्स को पर्सनलाइज़ करने में हेल्प करते है।
