Using W3.CSS color themes In Hindi
W3.CSS वेबपेज एलिमेंट स्टाइलिंग स्क्रिप्ट में डिज़ाइन डेवलप एचटीएमएल, जावास्क्रिप्ट, वेबपेज को एक बिल्ट-इन कलर थीम फ़ीचर के साथ डेकोरेट या फॉर्मेट किया जा सकता है. जिससे वेब डेवलपर अपनी कस्टम डेवलप वेबसाइट वेबपेज पर एक जैसी सिमिलर कलर स्कीम थीम्स को इमीडियेट इम्प्लीमेंट कर सकते हैं। ये W3.CSS कलर स्कीम थीम्स आपके डिफ़ॉल्ट बोरिंग वेबपेज को नई थीम बटन, हेडर, टेक्स्ट, और बैकग्राउंड जैसे अलग-अलग UI एलिमेंट के लिए पहले से फिक्स रेडीमेड कलर का एक सेट ग्रुप कलेक्शन प्रोवाइड करता हैं. जिससे कोई भी बिगिनर वेब यूजर कम स्किल रिसोर्सेज में एक जैसा कॉमन सिमिलर वेबपेज वेबसाइट डिज़ाइन डेवलपमेंट कर सकते हैं।
W3.CSS वेब स्टाइलिंग कलर थीम स्क्रिप्ट स्पेशली रूप से उन वेब डेवलपर्स के लिए यूज़फुल हैं. जो मल्टीप्ल इंडिविजुअल वेबपेज थीम कलर को मैन्युअली कस्टमाइज़ किए बिना जल्दी से प्रीव्यू होने वाले वेबपेज डिज़ाइन और डेवलप करना चाहते हैं। W3.CSS कलर थीम लाइब्रेरी में आपको मौजूदा थीम्स के लिए नए प्राइमरी, सेकेंडरी, और एक्सेंट कलर फीचर्स के कलेक्शन मिलते हैं, और इन कलर क्लासेज में एडवांस कस्टमाइज़ेशन के लिए अन्य W3.CSS यूटिलिटी क्लास के साथ इन्हे मर्ज कर यूज़ किया जाता है।
W3.CSS Color Theme Overview Concept.
W3.CSS वेब स्टाइलिंग स्क्रिप्ट वेब डेवलपर को कई तरह के पहले से प्रीडिफाइन कलर थीम कलेक्शन प्रोवाइड करता है, जिन्हें वेब डेवलपर अपने मौजूदा वेबपेज में इन एलिमेंट को ग्लोबली अप्लाई किया जा सकता हैं. जैसे,
- Webpage background
- Text paragraph sections
- Border styling
- Button type
- Text headings
ये पॉपुलर W3.CSS थीम कलर डिफ़ॉल्ट रूप से प्राइमरी, सेकेंडरी, और एक्सेंट, कलर थीम्स फीचर्स को यूज़ करती हैं. जो किसी यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में एक जैसे प्रीव्यू होने के साथ अच्छे से काम करते हैं।
List details of the W3.CSS Color Theme Library.
यहाँ आपको W3.CSS वेब डेवलपमेंट स्क्रिप्ट में पॉपुलर डिफाइन की गई कुछ मुख्य कलर थीम इनफार्मेशन प्रोवाइड की गई हैं.
- .w3-theme-{color} – यह यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में किसी एलिमेंट पर प्राइमरी थीम कलर को अप्लाई करने में हेल्प करता है।
- यहाँ आपको थीम कलर चॉइस में रेड, ब्लू, ग्रीन, पर्पल, टील, पिंक, इंडिगो, ऑरेंज, ग्रे, आदि और भी थीम्स कलर कलेक्शन हो सकता है।
- .w3-theme-dark-{color} – यह यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में किसी एलिमेंट पर प्राइमरी थीम कलर के डार्क वर्जन को अप्लाई करता है।
- .w3-theme-light-{color} – यह यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में किसी एलिमेंट पर प्राइमरी थीम कलर के लाइट वर्जन को अप्लाई करता है।
- .w3-theme{color}-text – यह यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में किसी एलिमेंट पर टेक्स्ट कलर को थीम कलर के रूप में सेट करता है।
How to use color theme attributes in W3.CSS.
W3.CSS वेब डेवलपर इन थीम कलर को अपने मौजूदा वेबपेज कंटेनर, बटन, हेडिंग और टेक्स्ट जैसे अलग-अलग एलिमेंट पर अप्लाई कर सकते हैं। यहाँ आपको नीचे इन थीम कलर का एक डिटेल्ड एक्साम्प्ल दिया गया है।
Example of color themes in a W3.CSS html webpage.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>lets explore W3.CSS Color Attributes</title>
<!– here we add W3.CSS link –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– Heading with red background and blue text –>
<h1 class=”w3-red w3-text-blue w3-padding”>
Let’s Explore the W3.CSS Color Attributes
</h1>
<!– Container with light grey background and red text –>
<div class=”w3-container w3-light-grey w3-padding”>
<p class=”w3-text-red”>
This div block container has a light grey background with red text effect.
</p>
</div>
<!– Button with green background –>
<div class=”w3-container w3-padding”>
<button class=”w3-button w3-green w3-large”>
Submit
</button>
</div>
<!– Container with dark grey background and blue text –>
<div class=”w3-container w3-dark-grey w3-padding w3-text-blue”>
<p>
This div block has a dark grey background with blue text.
</p>
</div>
<!– Container with light grey background and brown text –>
<div class=”w3-container w3-light-grey w3-padding w3-text-brown”>
<p>
This div block has a light grey background with brown text.
</p>
</div>
<!– Footer with green background and pink text –>
<footer class=”w3-container w3-green w3-text-pink”>
<p>
© 2027 All Website Rights Reserved
</p>
</footer>
</body>
</html>
Explanation of color themes in a W3.CSS html webpage.
- यहाँ इस एक्साम्प्ल में हेडिंग <h1> में ब्लू टेक्स्ट के साथ डार्क रेड रंग की थीम का यूज़ किया गया है।
- डिव कंटेनर ब्लॉक में लाइट रेड टेक्स्ट के साथ बैकग्राउंड के लिए लाइट ब्लैक कलर की थीम का यूज़ किया गया है।
- सबमिट बटन में बैकग्राउंड के लिए ग्रीन कलर की थीम का यूज़ किया गया है।
- अन्य डिव कंटेनर ब्लॉक में सफ़ेद ब्लू के साथ डार्क लाइम कलर की थीम का यूज़ किया गया है।
- बॉटम में वेबसाइट फुटर में पिंक टेक्स्ट के साथ डार्क ग्रीन कलर की थीम का यूज़ किया गया है।
Common theme color choices in W3.CSS web development scripts.
यहां आपको एचटीएमएल, जावास्क्रिप्ट, वेबपेज में यूज़ होने वाले कुछ कॉमन थीम कलर प्रोवाइड किए गए हैं, जिन्हें आप अपने वेबपेज वेबसाइट डिज़ाइन में यूज़ कर सकते हैं.
- Red – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क रेड .w3-theme-red, .w3-theme-dark-red, .w3-theme-light-red थीम कलर में डिस्प्ले कर सकते है.
- Blue – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क ब्लू .w3-theme-blue, .w3-theme-dark-blue, .w3-theme-light-blue थीम कलर में डिस्प्ले कर सकते है.
- Green – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क ग्रीन .w3-theme-green, .w3-theme-dark-green, .w3-theme-light-green थीम कलर में डिस्प्ले कर सकते है.
- Yellow – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क येलो .w3-theme-yellow, .w3-theme-dark-yellow, .w3-theme-light-yellow थीम कलर में डिस्प्ले कर सकते है.
- Purple – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क पर्पल .w3-theme-purple, .w3-theme-dark-purple, .w3-theme-light-purple थीम कलर में डिस्प्ले कर सकते है.
- Teal – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क टील .w3-theme-teal, .w3-theme-dark-teal, .w3-theme-light-teal थीम कलर में डिस्प्ले कर सकते है.
- Pink – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क पिंक .w3-theme-pink, .w3-theme-dark-pink, .w3-theme-light-pink थीम कलर में डिस्प्ले कर सकते है.
- Indigo – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क इंडिगो .w3-theme-indigo, .w3-theme-dark-indigo, .w3-theme-light-indigo थीम कलर में डिस्प्ले कर सकते है.
- Orange – इसमें आप थीम कलर को नार्मल, लाइट, और डार्क ऑरेंज .w3-theme-orange, .w3-theme-dark-orange, .w3-theme-light-orange थीम कलर में डिस्प्ले कर सकते है.
- Gray– इसमें आप थीम कलर को नार्मल, लाइट, और डार्क ग्रे .w3-theme-grey, .w3-theme-dark-grey, .w3-theme-light-grey थीम कलर में डिस्प्ले कर सकते है.
Here, you get three variations for each color in W3.CSS.
- Primary theme color (.w3-theme-{color}) – इसमें आपको स्टैंडर्ड थीम कलर चॉइस मिलते है।
- Dark version (.w3-theme-dark-{color}) – इसमें आपको थीम कलर के डार्क वर्जन चॉइस मिलते है।
- Light version (.w3-theme-light-{color}) – इसमें आपको थीम कलर के लाइट वर्जन के चॉइस मिलते है।
Using theme color for button choices in W3.CSS.
यूजर डिफाइन एचटीएमएल, जावास्क्रिप्ट, वेबपेज में W3.CSS कलर थीम बटन में अप्लाई किए जा सकते हैं. जिससे वेब डेवलपर एक जैसे वेबपेज थीम एलिमेंट बटन स्टाइल डेवलप कर सकते हैं. जो आपके मौजूदा वेबपेज के सभी या बाकी डिज़ाइन से प्रॉपर मैच करते हैं।
Example of theme button color in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>let explore W3.CSS button theme color</title>
<!– W3.CSS button theme color–>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-container w3-padding-32″>
<h2>W3.CSS Button Colors</h2>
<!– Here we add indigo button color –>
<button class=”w3-button w3-indigo w3-large”>
Submit
</button>
<!– Here we add grey button color –>
<button class=”w3-button w3-grey w3-large”>
Cancel
</button>
<!– Here we add pink button color –>
<button class=”w3-button w3-pink w3-large”>
Reset
</button>
<!– Here we add teal button color –>
<button class=”w3-button w3-teal w3-large”>
ok
</button>
<!– Here we add green button color –>
<button class=”w3-button w3-green w3-large”>
Upload
</button>
<!– Here we add yellow button color –>
<button class=”w3-button w3-yellow w3-large”>
Download
</button>
<!– Here we add orange button color –>
<button class=”w3-button w3-orange w3-large”>
Upload data
</button>
</div>
</body>
</html>
Explanation of theme button color in W3.CSS.
- यहाँ इस एक्साम्प्ल में हर W3.CSS बटन एक अलग कलर थीम (.w3-button w3-indigo, .w3-button w3-pink, आदि) को यूज़ करता है.
- हर नए W3.CSS बटन को w3-large क्लास का यूज़ करके बड़े साइज़ में भी स्टाइल किया जाता है.
Using theme colors for navigation bars in W3.CSS.
W3.CSS वेब डेवलपर अपनी कस्टम वेबपेज वेबसाइट पर एक जैसा सिमिलर लुक या ऍपेरेन्स डेवलप करने के लिए नेविगेशन बार के लिए कलर थीम का भी यूज़ कर सकते हैं।
Example of a themed navigation bar in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Lets Explore W3.CSS Navigation Bars Features</title>
<!– W3.CSS link –>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– Webpage heading define –>
<div class=”w3-container w3-padding”>
<h1>Let Create W3.CSS Navigation Bars</h1>
<p>Here we create a two navigation bars with W3.CSS colors.</p>
</div>
<!– Here we create indigo navigation webpage bar –>
<div class=”w3-bar w3-indigo”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Disclaimers</a>
</div>
<br>
<!– Here we create pink navigation webpage bar –>
<div class=”w3-bar w3-pink”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Course</a>
<a href=”#” class=”w3-bar-item w3-button”>Java</a>
<a href=”#” class=”w3-bar-item w3-button”>Python</a>
<a href=”#” class=”w3-bar-item w3-button”>W3.CSS</a>
<a href=”#” class=”w3-bar-item w3-button”>Javascript</a>
<a href=”#” class=”w3-bar-item w3-button”>Matlab</a>
</div>
</body>
</html>
Explanation of a themed navigation bar in W3.CSS.
- यहाँ इस एक्साम्प्ल में यूजर डिफाइन नेविगेशन बार (<div class=”w3-bar”>) इंडिगो और पिंक थीम कलर्स (w3-indigo, w3-pink) का यूज़ करते हैं।
