Text and Background Color Utilities W3.CSS In Hindi
किसी एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन W3.CSS स्किप्टिंग लैंग्वेज में, यूजर डिफाइन वेब ऑब्जेक्ट एलिमेंट पर टेक्स्ट और बैकग्राउंड कलर यूटिलिटी क्लास को इजीली हैंडल या मैनेज किया जा सकता है। एचटीएमएल वेबपेज में डिफाइन टेक्स्ट पैराग्राफ और बैकग्राउंड कलर क्लास वेब डेवलपर को कस्टम CSS सोर्स कोड लिखे बिना अपने वेबपेज में टेक्स्ट कंटेंट और बैकग्राउंड पर इमीडियेट कलर थीम्स स्कीम को अप्लाई करने में हेल्प करते हैं। W3.CSS स्किप्टिंग में टेक्स्ट एंड बैकग्राउंड कलर स्कीम प्रीडिफाइन कलर सेट्स स्कीम के एक सेट पर डिफाइन होते है. जो अधिकतर कॉमन वेब एलिमेंट पर जरूरत पड़ने पर यूज़ किये जाते है. जिससे आपके वेबपेज पर टेक्स्ट, ऑब्जेक्ट, पैराग्राफ एलिमेंट को डेकोरेट फॉर्मेट या स्टाइल करना इजी हो जाता है।
Let’s take a closer look at the text color and background color utility classes in W3.CSS.
Text color utility concept in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में पहले से प्रीडिफाइन टेक्स्ट कलर यूटिलिटी क्लास को अप्लाई करके वेबपेज टेक्स्ट पैराग्राफ के डिफ़ॉल्ट कलर को मैनेज और कंट्रोल किया जा सकता है। टेक्स्ट कलर यूटिलिटी क्लास वेब डेवलपर को किसी भी वेबपेज एलिमेंट ऑब्जेक्ट पर, जैसे टेक्स्ट, पैराग्राफ, हेडिंग, सबहैडिंग, लिंक, और सेन्टेन्स आदि में वर्त्तमान टेक्स्ट का कलर चेंज या मॉडिफाई करने की परमिशन प्रोवाइड करते हैं।
Basic W3.CSS text color class names.
- .w3-text-{color} – W3.CSS वेब डेवलपमेंट स्क्रिप्ट में डिफाइन टेक्स्ट के कलर को डिजायर नए कलर से चेंज या मॉडिफाई करने में हेल्प करता है।
- w3-text-color choice – यहाँ आप अपने वेब टेक्स्ट एलिमेंट के लिए रेड, ब्लू, ग्रीन, येलो, ब्लैक, वाइट, पर्पल, ग्रे, ऑरेंज, आदि को टेक्स्ट कलर के रूप में सलेक्ट कर सकते है।
- Text Color Class Syntax – .w3-text-{color}
Common text color classes used in W3.CSS.
- .w3-text-red – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में रेड टेक्स्ट कलर क्लास इफ़ेक्ट को अप्लाई करता है।
- .w3-text-blue – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में ब्लू टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-green – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में ग्रीन टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-yellow – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में येलो टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-orange – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में ऑरेंज टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-purple – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में पर्पल टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-black – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में ब्लैक टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-white – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में वाइट टेक्स्ट कलर को अप्लाई करता है।
- .w3-text-grey – यह एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन टेक्स्ट, पैराग्राफ, सेंटेंस, हैडिंग, सबहैडिंग, आदि में ग्रे टेक्स्ट कलर को अप्लाई करता है।
Example of the .w3-text-{color} text color class in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets explore w3-text-color Text Color classes</title>
</head>
<body>
<!– text display with Red Text class–>
<p class=”w3-text-red”>This text display with red text color class.</p>
<!– text display with Blue Text –>
<p class=”w3-text-blue”>This text display with blue text color class.</p>
<!– text display with Green Text –>
<p class=”w3-text-green”>This text display with green text color class.</p>
<!– text display with Yellow Text –>
<p class=”w3-text-yellow”>This text display with yellow text color class.</p>
<!– text display with Orange Text –>
<p class=”w3-text-orange”>This text display with orange text color class.</p>
<!– text display with Purple Text –>
<p class=”w3-text-purple”>This text display with purple text color class.</p>
<!– text display with Black Text –>
<p class=”w3-text-black”>This text display with black text color class.</p>
<!– teal Text color with light pink background) –>
<p class=”w3-text-teal” style=”background-color: #fabc;”>This text display with teal text color class with a light pink background behind.</p>
</body>
</html>
Explanation of the .w3-text-{color} text color class in W3.CSS.
- यहाँ इस एक्साम्प्ल में हर पैराग्राफ़ टेक्स्ट सेंटेंस को (<p>) टैग में एक अलग टेक्स्ट कलर .w3-text-{color} क्लास को अप्लाई कर डिस्प्ले किया गया है.
- लास्ट एक्साम्प्ल में एडवांस कंट्रास्ट के लिए लाइट बैकग्राउंड पर लाइम टेक्स्ट और पिंक बैकग्राउंड को डिस्प्ले करता है.
Background Color Utilities Concept in W3.CSS Scripting.
एचटीएमएल, जावास्क्रिप्ट, वेबपेज डिज़ाइन में टेक्स्ट वेबपेज ऑब्जेक्ट एलिमेंट बैकग्राउंड कलर को भी बैकग्राउंड यूटिलिटी क्लास को अप्लाई करके यूज़ या हैंडल किया जाता है। W3.CSS वेब डेवलपमेंट स्क्रिप्ट वेब डेवलपर को कई तरह के बैकग्राउंड कलर चॉइस प्रोवाइड करता है. जिन्हें मौजूदा वेबपेज में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, जैसे अलग-अलग वेबपेज एलिमेंट पर डिजायर बैकग्राउंड को अप्लाई किया जा सकता है।
Basic W3.CSS Scripting background color class names.
- .w3-{bgcolor} – W3.CSS वेब डेवलपमेंट स्क्रिप्ट में डिफाइन किसी वेबपेज एलिमेंट के बैकग्राउंड कलर सेट को चेंज या अप्लाई करने में हेल्प करता है।
- w3-{bgcolor} Background color choices – इसमें आप अपने वेब ऑब्जेक्ट बैकग्राउंड एलिमेंट के लिए रेड, ब्लू, ग्रीन, येलो, ब्लैक, वाइट, ग्रे, आदि बैकग्राउंड कलर को अप्लाई कर सकते है।
- Background color class syntax – .w3-{bgcolor}
Common W3.CSS .w3-{bgcolor} background color class names.
- .w3-red – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर रेड बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-blue – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर ब्लू बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-green – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर ग्रीन बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-yellow – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर येलो बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-orange – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर ऑरेंज बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-purple – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर पर्पल बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-black – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर ब्लैक बैकग्राउंड कलर अप्लाई किया जाता है।
- .w3-white – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर वाइट बैकग्राउंड कलर अप्लाई किया जाता है।.
- .w3-grey – मौजूदा वेबपेज एलिमेंट ऑब्जेक्ट में कंटेनर, सेक्शन, और डिव ब्लॉक, पैराग्राफ, आदि पर ग्रे बैकग्राउंड कलर अप्लाई किया जाता है।.
Example of the .w3-{bgcolor} background color class in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Lets explore w3-bgcolor Background Color classes</title>
</head>
<body>
<!– it display Grey Background behind the block p tag text–>
<div class=”w3-container w3-grey”>
<p>This paragraph tag display with grey background.</p>
</div>
<!– it display Red Background behind the white p tag text–>
<div class=”w3-container w3-red”>
<p>This paragraph tag display with red background.</p>
</div>
<!– it display Blue Background behind the white p tag text –>
<div class=”w3-container w3-blue”>
<p>This paragraph tag display with blue background.</p>
</div>
<!– it display Geen Background behind the white p tag text –>
<div class=”w3-container w3-green”>
<p>This paragraph tag display with green background.</p>
</div>
<!– it display Yellow Background behind the p tag text –>
<div class=”w3-container w3-yellow”>
<p>This paragraph tag display with yellow background.</p>
</div>
<!– it display Orange Background behind the p tag text –>
<div class=”w3-container w3-orange”>
<p>This paragraph tag display with orange background.</p>
</div>
<!– it display Brown Background behind the lime p tag text –>
<div class=”w3-container w3-brown w3-text-lime”>
<p>This paragraph tag display with brown background and lime text.</p>
</div>
</body>
</html>
Explanation of the .w3-{bgcolor} background color class in W3.CSS.
- यहाँ इस एक्साम्प्ल में हर div पैराग्राफ टैग एलिमेंट में एक स्पेशल .w3-{bgcolor} बैकग्राउंड क्लास को अप्लाई करके आप अलग बैकग्राउंड कलर को डिस्प्ले कर सकते है.
- लास्ट एक्साम्प्ल में डिव पैराग्राफ ब्लॉक को आसानी से रीड करने के लिए लाइम टेक्स्ट कलर के साथ ब्राउन बैकग्राउंड कलर को डिस्प्ले किया गया है.
Text and Background Color Combinations in W3.CSS.
एचटीएमएल, जावास्क्रिप्ट, वेबपेज में अधिक डिटेल्ड काम्प्लेक्स वेबपेज डिज़ाइन डेवलप करने के लिए वेब डेवेलपर टेक्स्ट कलर क्लास और बैकग्राउंड कलर क्लास को ग्रुप या मर्ज कर डिस्प्ले कर सकते हैं. इससे वेब डेवलपर किसी वेबपेज एलिमेंट के डिफ़ॉल्ट बैकग्राउंड कलर को नए कलर से सेट या मॉडिफाई कर सकते हैं, और इसके साथ ही एक अच्छा कलर कंट्रास्ट और रीड करने के लिए टेक्स्ट कलर को भी जरूरत के अनुसार कस्टमाइज़ कर सकते हैं.
Example of text and background colors together in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<title>Group example of Text and Background Colors class</title>
</head>
<body>
<!– it display yellow background with black Text –>
<div class=”w3-container w3-yellow w3-text-black”>
<p>This paragraph tag display with yellow background and black text.</p>
</div>
<!– it display orange background with white Text –>
<div class=”w3-container w3-orange w3-text-white”>
<p>This paragraph tag display with orange background and white text.</p>
</div>
<!– it display green background with lime Text –>
<div class=”w3-container w3-green w3-text-lime”>
<p>This paragraph tag display with green background and lime text.</p>
</div>
<!– it display teal background with white Text –>
<div class=”w3-container w3-teal w3-text-white”>
<p>This paragraph tag display with teal background and white text.</p>
</div>
</body>
</html>
Explanation of text and background colors together in W3.CSS.
- यहाँ फर्स्ट div पैराग्राफ ब्लॉक में येलो बैकग्राउंड के साथ ब्लैक टेक्स्ट है.
- सेकंड div पैराग्राफ ब्लॉक में ऑरेंज बैकग्राउंड के साथ वाइट टेक्स्ट है.
- थर्ड div पैराग्राफ ब्लॉक में ग्रीन बैकग्राउंड के साथ लाइम टेक्स्ट है.
- लास्ट div पैराग्राफ ब्लॉक में टील बैकग्राउंड के साथ वाइट टेक्स्ट है.
Background Transparency (Opacity) Concept in W3.CSS.
एचटीएमएल, जावास्क्रिप्ट, वेब डेवलपमेंट में वेबपेज टेक्स्ट बैकग्राउंड को थोड़ा ट्रांसपेरेंट डेवेलप करने के लिए वेब डेवलपर बैकग्राउंड कलर्स क्लास के लिए ओपेसिटी फीचर को यूज़ कर सकते हैं। ट्रांसपेरेंट इफ़ेक्ट डायरेक्ट W3.CSS स्क्रिप्टिंग में बिल्ट-इन फीचर्स नहीं है. लेकिन वेब डेवलपर जरूरत के अनुसार ओपेसिटी के लिए एक कस्टम CSS कोड को मैन्युअल अप्लाई कर सकते हैं।
Example of a transparent background in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
.transparent-bg {
background-color: rgb(11, 144, 139, 0.3); /* teal background color with 30% opacity effect*/
}
.transparent-bg1 {
background-color: rgb(237, 235, 6, 0.8); /* yellow background color with 80% opacity effect*/
}
</style>
<title>Let explore Transparent Background Opacity class </title>
</head>
<body>
<!– here it display transparent teal background color effect –>
<div class=”w3-container transparent-bg”>
<p>This paragraph tag display with transparent 30% teal background effect.</p>
</div>
<!– here it display transparent yellow background color effect –>
<div class=”w3-container transparent-bg1″>
<p>This paragraph tag display with transparent 80% yellow background effect.</p>
</div>
</body>
</html>
Explanation of a transparent background in W3.CSS.
- यहाँ इस एक्साम्प्ल में ओपेसिटी ट्रांसपेरेंट-bg क्लास RGBA वैल्यू को यूज़ करता है, जहाँ फर्स्ट RGBA वैल्यू (0.3) ट्रांसपेरेंसी को 30% पर सेट करती है। इससे बैकग्राउंड कलर लाइट टील हो जाता है. लेकिन कुछ ट्रांसपेरेंसी के साथ, जिससे उसके पीछे का कंटेंट थोड़ा टांसपरेंट डिस्प्ले होता है।
