Typography and text alignment (w3-center, w3-left) In Hindi.
मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस का उपयोग कर किसी भी वेबपेज कंटेंट टेक्स्ट के साइज, कंटेंट वेट, कंटेंट स्टाइल्स और डिफ़ॉल्ट ब्लैक कलर को कण्ट्रोल और मैनेज करने के लिए आप डब्लू3.सीएसएस में टाइपोग्राफी से जुड़े कई क्लासेज का एक ग्रुप सेट मिलता है।
So let’s learn about the classes related to typography in W3.CSS in HTML website.
W3.CSS Text Size Classes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस .w3-xlarge, .w3-large, .w3-small, आदि बिल्ट-इन रेडीमेड टेक्स्ट क्लासेज का उपयोग करके वेब पेज टेक्स्ट कंटेंट फ़ॉन्ट साइज को बड़े से लेकर छोटे साइज आर्डर में प्रीव्यू कर सकते हैं।
W3.CSS Text Size Classes Example.
<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>
<p class=”w3-small”>This is a smaller text example </p>
Classes for W3.CSS text size.
- .w3-xlarge — मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट को एक्स्ट्रा लार्ज टेक्स्ट साइज में प्रीव्यू करता है।
- .w3-large — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को लार्ज साइज आर्डर में प्रीव्यू करता है।
- .w3-small — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को स्माल टेक्स्ट फॉण्ट साइज में प्रीव्यू करता है।
- .w3-xsmall — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को एक्स्ट्रा स्माल साइज में प्रीव्यू करता है।
- .w3-tiny — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को स्माल टाइनी साइज में प्रीव्यू करता है।
W3.CSS Text Weight Classes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट वेट क्लास्सेस का उपयोग किसी भी वेबपेज टेक्स्ट कंटेंट वेट को बोल्ड या थोड़ा डार्क आर्डर मे प्रीव्यू करते हैं।
W3.CSS Text Weight Classes Example.
<p class=”w3-bold”>Example of W3.CSS bold text </p>
W3.CSS Classes for Text Weight.
- .w3-bold — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेबपेज टेक्स्ट कंटेंट टेक्स्ट को बोल्ड आर्डर में प्रीव्यू करता है।
- .w3-light — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट टेक्स्ट को लाइट थिन (पतला) आर्डर में प्रीव्यू करता है।
- .w3-medium — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में वेब पेज टेक्स्ट कंटेंट को डिफ़ॉल्ट (मीडियम) फॉण्ट टाइपोग्राफी वेट आर्डर में प्रीव्यू करता है।
W3.CSS Text Style Classes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट में टेक्स्ट स्टाइल क्लासेस का उपयोग अपने मौजूदा वेबपेज टेक्स्ट की डिफ़ॉल्ट स्टाइल को कण्ट्रोल और मैनेज करने में करते है. जैसे, वेबपेज कंटेंट को इटैलिक करना और अंडरलाइन करना शामिल है।
Example of W3.CSS Text Style Classes.
<p class=”w3-italic”> italicized text example</p>
<p class=”w3-underline”> underlined text example</p>
Classes for W3.CSS text styles.
- .w3-italic — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को इटैलिक आर्डर में प्रीव्यू करता है।
- .w3-underline — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को अंडरलाइन करता है।
W3.CSS Text Color Classes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट में डब्लू3.सीएसएस टेक्स्ट का कलर को बदलने के लिए आपको कई बिल्ट-इन कलेक्शन ऑफ़ कलर क्लासेस प्रोवाइड करता है।
Example of W3.CSS text color.
<p class=”w3-text-yellow”> yellow text example</p>
<p class=”w3-text-green”>green text example</p>
Classes for W3.CSS text color.
- .w3-text-red — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को लाल टेक्स्ट कलर में प्रीव्यू करता है।
- .w3-text-blue — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को ब्लू कलर में डिस्प्ले करता है।
- .w3-text-green — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को हरा कलर में प्रीव्यू करता है।
- .w3-text-grey — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को ग्रे टेक्स्ट कलर आर्डर में प्रीव्यू करता है।
- .w3-text-yellow — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को पीला कलर में प्रीव्यू करता है।
W3.CSS Text Transform Classes.
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट में डब्लू3.सीएसएस के साथ टेक्स्ट को अप्पर केस, लोअर केस, केपेटलाइज आर्डर में प्रीव्यू कर टेक्स्ट कैपिटलाइज़ेशन आर्डर को मैनेज कर सकते हैं।
W3.CSS Text Transform Example.
<p class=”w3-uppercase”>You see uppercase text</p>
<p class=”w3-lowercase”>You see lowercase text.</p>
Classes for W3.CSS Text Transform.
- .w3-uppercase — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को अपरकेस टेक्स्ट आर्डर में प्रीव्यू करता है।
- .w3-lowercase — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट को लोअरकेस टेक्स्ट आर्डर में प्रीव्यू करता है।
- .w3-capitalize — यह मौजूदा एचटीएमएल वेबसाइट वेबपेज में टेक्स्ट कंटेंट टेक्स्ट के प्रत्येक वर्ड के फर्स्ट करैक्टर को कैपिटलाइज़ बड़े अक्षर आर्डर में प्रीव्यू करता है।
आप अपने मौजूदा एचटीएमएल वेबसाइट वेबपेज में डब्लू3.सीएसएस टेक्स्ट में टेक्स्ट को इफेक्टिव आर्डर में स्टाइल करने के लिए टेक्स्ट अलाइनमेंट और टाइपोग्राफी आदि डब्लू3.सीएसएस क्लासेस का उपयोग कर सकते हैं।
Here is a W3.CSS example of centered, bold and capitalized text with green color.
<!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 Tray W3.CSS Typography Example</title>
</head>
<body>
<div class=”w3-left w3-xlarge w3-bold w3-capitalize w3-text-green”> <!– example of left-aligned, bold, large, and green text example–>
<h1>You Can See W3.CSS Typography </h1>
<p>You Can See Many Other w3.css Attributes</p>
</div>
<div>
<h1 class=”w3-xlarge”>Now You See Extra Large Heading</h1>
<p class=”w3-small”>This is a smaller text example </p>
<div>
<p class=”w3-bold”>Example of W3.CSS bold text </p>
</div>
<div>
<p class=”w3-italic”> italicized text example</p>
<p class=”w3-underline”> underlined text example</p>
</div>
<div>
<p class=”w3-text-yellow”> yellow text example</p>
<p class=”w3-text-green”>green text example</p>
<div>
<p class=”w3-uppercase”>You see uppercase text</p>
<p class=”w3-lowercase”>You see lowercase text.</p>
</div>
</div>
</body>
</html>
