Font sizes and colors (w3-text-red, w3-large) In Hindi.
W3.CSS फ्रेमवर्क कॉम्पोनेन्ट लाइब्रेरी यूजर डिफाइन वेबपेज एलिमेंट कंटेंट पर फ़ॉन्ट साइज़ और टेक्स्ट कलर को मैन्युअल रूप से अप्लाई करने के लिए कई यूटिलिटी क्लास प्रोवाइड करता है। ये W3.CSS में प्री क्रिएटेड क्लास स्टाइल्स कस्टम CSS क्लास कोड लिखे बिना डायरेक्ट आपके वेबपेज कंटेंट को स्टाइल और फॉर्मेट करने में हेल्प करते हैं. जिससे वेब डेवलपर बड़े लाइन्स ऑफ़ css कोड अप्लाई किये बिना ही अपनी वेब डिज़ाइन को ज़रूरतों के हिसाब से वेबपेज में टेक्स्ट फॉण्ट साइज और कलर स्टाइल्स लुक अपीयरेंस को इम्मेडिएटली मॉडिफाई कर सकते हैं।
Font Size Class in the W3.CSS Framework.
W3.CSS फ्रेमवर्क वेब डेवलपर को वेबपेज टेक्स्ट साइज़ को इनक्रीस डिक्रीस या कंट्रोल करने के लिए कई तरह की बिल्ट-इन क्लास सपोर्ट प्रोवाइड करता है। इन प्रीडिफाइन W3.CSS क्लास में फ़ॉन्ट साइज़ के लिए पहले से फिक्स्ड वैल्यू ऐड किए गए हैं. जो किसी भी वेबपेज में उसके हेडिंग टेक्स्ट ,टाइटल, पैराग्राफ कंटेंट, और दूसरे अन्य वेबपेज टेक्स्ट एलिमेंट के साइज़ को ग्रो श्रिंक या एडजस्ट करना आसान करते हैं।
Common W3.CSS framework font size classes.
W3.CSS फ्रेमवर्क लाइब्रेरी में सबसे ज़्यादा यूज़ होने वाली कुछ पॉपुलर फ़ॉन्ट साइज़ क्लास में मुख्य रूप से ये हैं.
- .w3-xlarge – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ वेबपेज टेक्स्ट को एक्स्ट्रा-लार्ज साइज़ में डिस्प्ले करने में किया जाता है।
- .w3-large – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ टेक्स्ट पर बड़ा फ़ॉन्ट साइज़ डिस्प्ले करने मे किया जाता है।
- .w3-medium – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ टेक्स्ट के लिए डिफ़ॉल्ट साइज़ (स्टैंडर्ड साइज़) डिस्प्ले करने मे किया जाता है।
- .w3-small – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ टेक्स्ट पर छोटा फ़ॉन्ट साइज़ डिस्प्ले करने में किया जाता है।
- .w3-xsmall – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ टेक्स्ट को एक्स्ट्रा-स्मॉल साइज़ में डिस्प्ले करने में किया जाता है।
- .w3-tiny – W3.CSS फ्रेमवर्क लाइब्रेरी में इस क्लास का यूज़ टेक्स्ट पर एक छोटा फ़ॉन्ट साइज़ अप्लाई करने में किया जाता है।
Example of the W3.CSS framework font size class.
यहाँ आप इस HTML वेबपेज में 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>Let Explore W3.CSS framework font size classes</title>
</head>
<body>
<!– Example of W3.CSS Extra Large Class Text –>
<h1 class=”w3-xlarge”>Now You See W3.CSS Extra Large Class Text</h1>
<!– Example with W3.CSS Large Text –>
<p class=”w3-large”>Now You See W3.CSS Large Class Text</p>
<!– Example with W3.CSS Default Text –>
<p class=”w3-medium”>Now You See W3.CSS Default Medium Class Text</p>
<!– Example with W3.CSS Small Text –>
<p class=”w3-small”>Now You See W3.CSS Small Class Text</p>
<!– Example with W3.CSS Extra Small Text –>
<p class=”w3-xsmall”>Now You See W3.CSS Extra Small Class Text</p>
<!– Example with W3.CSS Tiny Text –>
<p class=”w3-tiny”>Now You See W3.CSS Tiny Class Text</p>
</body>
</html>
Here in the W3.CSS font size class example above.
- <h1> टैग एलिमेंट में एक्स्ट्रा लार्ज टेक्स्ट <h1 class=”w3-xlarge”> टेक्स्ट डिस्प्ले होगा।
- <p> पैराग्राफ टैग एलिमेंट में अप्लाई क्लास के आधार पर अलग-अलग टेक्स्ट फॉण्ट साइज़ मौजूदा वेबपेज में डिस्प्ले होंगे। जैसे, w3-large से w3-tiny तक अलग अलग फॉण्ट साइज में टेक्स्ट इनफार्मेशन प्रीव्यू होंगे।
Popular Text Color Classes in the W3.CSS Framework.
W3.CSS फ्रेमवर्क किसी भी वेब डेवलपर को प्रीडिफाइन फिक्स्ड कलर क्लास का एक ग्रुप सेट प्रोवाइड करता है, जिसका यूज़ वेब डेवलपर किसी भी वेबसाइट में टाइटल, हैडिंग, पैराग्राफ, हैडलाइन टेक्स्ट कलर को चेंज करने में किया जा सकता है। ये W3.CSS फ्रेमवर्क कलर क्लास में एक जैसी नेमिंग कांसेप्ट को फॉलो करती हैं. जिससे किसी भी वेबपेज में कलर कॉम्बिनेशन याद करना और वेबपेज कंटेंट पैराग्राफ पर अप्लाई करना इजी हो जाता है।
Common W3.CSS Framework Text Color Classes.
W3.CSS फ्रेमवर्क में सबसे अधिक यूज़ होने वाले टेक्स्ट कलर क्लास में मुख्य रूप से ये हैं.
- .w3-text-red – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर रेड कलर में डिस्प्ले करता है।
- .w3-text-blue – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर ब्लू कलर में डिस्प्ले करता है।
- .w3-text-green – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर ग्रीन कलर में डिस्प्ले करता है।
- .w3-text-yellow – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर येलो कलर में डिस्प्ले करता है।
- .w3-text-orange – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर ऑरेंज कलर में डिस्प्ले करता है।
- .w3-text-purple – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर पर्पल कलर में डिस्प्ले करता है।
- .w3-text-grey – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर ग्रे कलर में डिस्प्ले करता है।
- .w3-text-black – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर ब्लैक कलर में डिस्प्ले करता है।
- .w3-text-white – W3.CSS फ्रेमवर्क में मौजूदा वेबपेज टेक्स्ट का कलर वाइट कलर में डिस्प्ले करता है.
Example of the text color class in the W3.CSS framework.
तो चलिए W3.CSS फ्रेमवर्क में इन टेक्स्ट कलर क्लास के यूज़ का एक डिटेल html वेबपेज एक्साम्प्ल देखे.
<!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>Let Explore W3.CSS framework Text color classes</title>
</head>
<body>
<!– Example of W3.CSS Red class Text –>
<p class=”w3-text-red”>Example with red class color text.</p>
<!– Example of W3.CSS Blue class Text –>
<p class=”w3-text-blue”>Example with blue class color text.</p>
<!– Example of W3.CSS Green class Text –>
<p class=”w3-text-green”>Example with green class color text.</p>
<!– Example of W3.CSS Yellow class Text –>
<p class=”w3-text-yellow”>Example with yellow class color text.</p>
<!– Example of W3.CSS Orange class Text –>
<p class=”w3-text-orange”>Example with orange class color text.</p>
<!– Example of W3.CSS Purple class Text –>
<p class=”w3-text-purple”>Example with purple class color text.</p>
<!– Example of W3.CSS Grey class Text –>
<p class=”w3-text-grey”>Example with grey class color text.</p>
<!– Example of W3.CSS Black class Text –>
<p class=”w3-text-black”>Example with black class color text.</p>
<!– Example of W3.CSS White class Text –>
<p class=”w3-text-yellow” style=”background-color:green;”>This is yellow W3.CSS text color with a green background shadow.</p>
</body>
</html>
In the above text color class example from the W3.CSS framework.
- इस एक्साम्प्ल में हर <p> टैग पैराग्राफ एलिमेंट एक अलग टेक्स्ट कलर क्लास को यूज़ कर डिस्प्ले करता है. जैसे, w3-text-red से w3-text-white तक अलग कलर क्लास यूज़ के लिए है।
- लास्ट लाइन में डिस्प्ले किया जाता है कि ग्रीन बैकग्राउंड पर येलो टेक्स्ट कैसा दिखता है, inline style=”background-color:green;” का यूज़ किया गया है।
Use of font size and color class groups in the single W3.CSS framework class example.
W3.CSS फ्रेमवर्क में यूज़ फ़ॉन्ट साइज़ और टेक्स्ट कलर क्लास को एक सिंगल वेबपेज में ग्रुप कर डिस्प्ले करना एक इजी टास्क है। वेब डेवलपर एक ही सिंगल वेबपेज एलिमेंट पर कई फ़ॉन्ट साइज़ और टेक्स्ट कलर क्लास इफ़ेक्ट को मैन्युअली अप्लाई कर सकते हैं. जिससे की एक ही वेबपेज में उसी टाइम पर फ़ॉन्ट साइज़ और कलर दोनों क्लास ऐट्रिब्यूट्स को अप्लाई किया जा सकता है।
Example of the font size and color group classes in the W3.CSS framework.
<!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>Let Explore W3.CSS framework font size and color group classes </title>
</head>
<body>
<!– W3.CSS framework Large class text , with Red Text color –>
<h1 class=”w3-large w3-text-red”>Now we see a Large font text size with Red color text display </h1>
<!– W3.CSS framework Small text, with Blue Text color –>
<p class=”w3-small w3-text-blue”>Now we see a Small font text size with Blue color text display </p>
<!– W3.CSS framework Extra Small text, with Green Text color –>
<p class=”w3-xsmall w3-text-green”>Now we see a Extra text size with Small Green color text display </p>
<!– Tiny, Yellow Text –>
<p class=”w3-tiny w3-text-yellow”>Now we see a Tiny text size with Yellow color text display </p>
</body>
</html>
Here, in the font size and color group classes example above.
- यहाँ इस html वेबपेज में <h1> टैग एलिमेंट में w3-large (फ़ॉन्ट साइज़ क्लास के लिए) और w3-text-red (कलर क्लास के लिए) दोनों क्लास अप्लाई किए गए हैं. जिससे मौजूदा वेबपेज में टेक्स्ट साइज लार्ज और कलर रेड में डिस्प्ले हो जाता है।
- इसी तरह मौजूदा वेबपेज में, अन्य <p> टैग एलिमेंट में फ़ॉन्ट साइज़ और टेक्स्ट कलर क्लास का कॉम्बिनेशन अप्लाई किया गया है।
