Overriding predefined styles in W3.CSS
एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस एक इजी टू यूज़ स्माल रेडीमेड सीएसएस क्लासेज डेवलपमेंट फ्रेमवर्क एनवायरनमेंट है. जो वेब डेवलपर को रेडीमेड वेबसाइट कॉम्पोनेन्ट बटन, कंटेनर, फॉण्ट टाइपोग्राफी, और वेबसाइट लेआउट स्ट्रक्चर जैसे मल्टीप्ल ऑब्जेक्ट एलिमेंट के लिए बिल्ट-इन स्टाइल्स क्लास्सेस प्रोवाइड करता है। कई बार वेब डेवलपर को पार्टीुलर वेब डिज़ाइन आवश्यकताओं को पूरा करने के लिए डिफ़ॉल्ट डब्लू3.सीएसएस स्टाइल्स को ओवरराइड करता है। जहा आप अपनी वेब डेवलपमेंट जरूरत के अनुसार कस्टम सीएसएस का उपयोग करके इसे मैन्युअली वेबपेज कंटेंट में अप्लाई कर सकते हैं।
So let us effectively override the predefined styles classes in W3.CSS.
Using Custom CSS in W3.CSS.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस स्टाइल्स को ओवरराइड करने के लिए, आप डब्लू3.सीएसएस स्टाइलशीट लिंक को वेबपेज में लिंक करने के बाद कस्टम डब्लू3.सीएसएस कोड को मैन्युअली रूप से वेबपेज के लिए क्रिएट कर सकते हैं। इस तरह, आपके द्वारा कस्टम डब्लू3.सीएसएस स्टाइल्स बिल्ट-इन स्टाइल्स को ओवरराइड कर देगी, और ये पूरी तरह से आपकी पुरानी डब्लू3.सीएसएस फाइल को रिप्लेस कर देगी।
W3.CSS button styles override example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Basic Overriding W3.CSS Styles Example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
/* let create ustom w3.css ode to Override button style */
.w3-button {
background-color: blue; /* apply Custom blue background */
color: yellow; /* apply Custom white yellow color */
padding: 19px 34px; /* apply Custom button padding */
font-size: 20px; /* apply Custom button font text size */
border-radius: 20px; /* apply Custom button border radius pie */
}
/* add Custom button Hover Effect styles */
.w3-button:hover {
background-color: white; /* it displays Slightly darker white on hover */
cursor: pointer;
}
</style>
</head>
<body>
<h2><center>Let Tray Override Button Style</center></h2>
<center><button class=”w3-button”>Button with Custom Style</button></center>
</body>
</html>
W3.CSS button styles override explanation.
- W3.CSS custom CSS – यहाँ आपको ऊपर दिए गए डब्लू3.सीएसएस सोर्स कोड उदाहरण में, लिखा गया कस्टम सीएसएस कोड डिफ़ॉल्ट w3-बटन क्लास स्टाइल्स को ओवरराइड कर देगा। जहा डब्लू3.सीएसएस वेबपेज में बटन के बैकग्राउंड कलर, बटन पैडिंग, फ़ॉन्ट साइज, और बटन बॉर्डर में पाई आर्डर को चेंज करता है।
- W3.CSS hover effect – इसके साथ मौजूदा वेबपेज में, :hover पीसुडो-क्लास के उपयोग से वेब विजिटर के द्वारा एक्सेस बटन पर होवर इफ़ेक्ट अप्लाई करने पर बटन होवर बैकग्राउंड कलर को चेंज करता है।
Overriding W3.CSS Specification.
कई बार आपको मैन्युअली यह सुनिश्चित करने के लिए कि आपकी स्टाइल्स डब्लू3.सीएसएस सोर्स कोड को ओवरराइड करती हैं, या नहीं, यहाँ आपको अधिक स्पेफिक सलेक्टर की आवश्यकता होती है। उदाहरण के लिए, यदि आप अपने वेबपेज में केवल किसी पार्टीुलर कंटेनर के अंदर किसी वेबपेज बटन की स्टाइल्स को रिप्लेस करना चाहते हैं. तो आपको अधिक स्पेसिफिक सीएसएस सलेक्टर को वेबपेज में मैन्युअली अप्लाई करना होगा।
Overriding styles within a specific container example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Specific w3.css class Override example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
/* let tary Override some W3.CSS button styles in a particular container w3.css component */
.test-container .w3-button {
background-color: green; /* apply Custom green button background */
color: yellow; /* apply Custom yellow button text color */
}
</style>
</head>
<body>
<div class=”test-container”>
<center><button class=”w3-button”>Let create custom button in test container</button></center>
</div>
<br>
<div>
<center><button class=”w3-button w3-red”>This button Display Without any Speific Override Effect</button></center>
</div>
</body>
</html>
Overriding W3.CSS Specification explanation.
- W3.CSS specific selectors – यहाँ आपको test-container .w3-button केवल वेबपेज में test-container क्लास के अंदर के मौजूदा वेबपेज बटनों को टारगेट करता है, इसके साथ ही यह कस्टम स्टाइल्स टेस्ट कंटेनर के बाहर के किसी भी बटनों को मॉडिफाई नहीं करता हैं।
- W3.CSS Scope of the override – आप अपने मौजूदा वेब पेज सोर्स कोड में मल्टीप्ल स्पेसिफिक सलेक्टर का उपयोग करके, आप मौजूदा वेबपेज में स्टाइल्स ओवरराइड को अपने वेबपेज के पर्टिकुलर पेज के किसी स्पेसिफिक पोरशन तक लिमिट कर देते हैं, यानि आपको जहाँ आवश्यक हो, वही ही डब्लू3.सीएसएस यूनिवर्सल स्टाइलिंग को अप्लाई कर सकते हैं।
Overriding W3.CSS Flexbox and Grid Layouts.
आप अपने किसी वेब पेज में डब्लू3.सीएसएस पेज लेआउट स्ट्रक्चर मैनेजमेंट के लिए फ्लेक्सबॉक्स और ग्रिड कंटेनर कम्पोनेंट का उपयोग करते है. लेकिन यदि आपको मौजूदा वेबपेज में यूजर डिफाइन कस्टम एडजस्टमेंट की जरूरत है. तो आप अपने स्वयं के डब्लू3.सीएसएस रूल्स का उपयोग करके इन वेबपेज लेआउट स्टाइल्स को ओवरराइड कर सकते हैं।
Override Flexbox Layout Example.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let Tray Flexbox Override In w3.css Example</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
/* let manual Override the W3.CSS flex layout components styles*/
.w3-row {
display: flex; /* create Flexbox layout */
justify-content: space-between; /* apply Adjust spacing between column items */
}
.w3-col {
flex: 1; /* it Make each column equal space in webpage */
padding: 10px; /* it add padding between column*/
margin: 10px; /* it Add margin around flex column */
}
</style>
</head>
<body>
<center><h2>Let Tray Sme Overriding Flexbox Layout</h2></center>
<div class=”w3-row”>
<div class=”w3-col”>
<div style=”background-color:red; height:100px;”>Flexbox Column 1</div>
</div>
<div class=”w3-col”>
<div style=”background-color:blue; height:100px;”>Flexbox Column 2</div>
</div>
<div class=”w3-col”>
<div style=”background-color:green; height:100px;”>Flexbox Column 3</div>
</div>
<div class=”w3-col”>
<div style=”background-color:yellow; height:100px;”>Flexbox Column 3</div>
</div>
</div>
</body>
</html>
Overriding W3.CSS Flexbox and Grid Layouts explanation.
- W3.CSS Flexbox Layout – अपने किसी वेबपेज में डब्लू3.सीएसएस पेज लेआउट स्ट्रक्चर कॉलम के बीच स्पेसिंग को कण्ट्रोल और मैनेज करने के लिए डिस्प्ले: फ्लेक्स और कस्टम जस्टिफाई-कंटेंट – स्पेस-बीटवीन का उपयोग करने के लिए .w3-row क्लास को ओवरराइड कर सकते है।
- W3.CSS Flex Column Behavior – अपने किसी वेबपेज में डब्लू3.सीएसएस पेज लेआउट स्ट्रक्चर में सभी कॉलम को इक्वल विड्थ अप्लाई करने के लिए .w3-col क्लास को फ्लेक्स: 1 के साथ मैन्युअल एडजस्ट कर सकते है।
