अध्याय 5: टेक्स्ट स्टाइलिंग (Text Styling)

इस अध्याय में, आप सीखेंगे कि CSS का उपयोग करके वेब पेजों पर टेक्स्ट को कैसे स्टाइल किया जा सकता है। आप फॉन्ट्स का उपयोग, टेक्स्ट का रंग और आकार बदलना, टेक्स्ट एलाइनमेंट, और टेक्स्ट सजावट (डेकोरेशन) के विभिन्न तरीकों के बारे में जानेंगे। इसके अलावा, आप Google फॉन्ट्स को अपने वेब पेजों में कैसे शामिल कर सकते हैं, इसका भी परिचय प्राप्त करेंगे। इस अध्याय के अंत तक, आप विभिन्न टेक्स्ट स्टाइलिंग तकनीकों का उपयोग करके अपने वेब पेजों को अधिक आकर्षक और पठनीय बनाने में सक्षम होंगे। चलिए, टेक्स्ट स्टाइलिंग के इस रोमांचक सफर की शुरुआत करते हैं।

Table of Contents

फॉन्ट्स का उपयोग (Using Fonts)

फॉन्ट्स का परिचय (Introduction to Fonts)

फॉन्ट्स वेब पेजों की दृश्यता और पठनीयता को बढ़ाने का एक महत्वपूर्ण हिस्सा हैं। CSS का उपयोग करके, आप विभिन्न फॉन्ट्स का उपयोग कर सकते हैं, जिससे आपका टेक्स्ट अधिक आकर्षक और उपयोगकर्ता के लिए अधिक स्पष्ट हो सकता है। फॉन्ट्स का सही चयन आपके वेब पेज की डिजाइन और उपयोगकर्ता अनुभव को सुधार सकता है।

फॉन्ट फैमिली (Font Family)

फॉन्ट फैमिली का उपयोग CSS में टेक्स्ट के लिए फॉन्ट स्टाइल निर्दिष्ट करने के लिए किया जाता है। आप एक से अधिक फॉन्ट्स को प्राथमिकता के क्रम में सूचीबद्ध कर सकते हैं, जिससे ब्राउज़र उपलब्ध फॉन्ट्स में से सबसे पहले वाले को उपयोग करेगा। फॉन्ट फैमिली का उपयोग करने का तरीका:

body {
font-family: "Arial, Helvetica, sans-serif";
}

इस उदाहरण में, ब्राउज़र पहले Arial फॉन्ट का उपयोग करेगा। अगर यह उपलब्ध नहीं है, तो Helvetica का उपयोग करेगा, और अंत में sans-serif का।

कस्टम फॉन्ट्स (Custom Fonts)

कस्टम फॉन्ट्स का उपयोग करके, आप अपने वेब पेज पर विशेष और अद्वितीय फॉन्ट्स लागू कर सकते हैं। कस्टम फॉन्ट्स का उपयोग करने के लिए, आप @font-face नियम का उपयोग कर सकते हैं या Google Fonts जैसी सेवा का उपयोग कर सकते हैं।

@font-face का उपयोग:

@font-face {
font-family: 'MyCustomFont';
src: url('mycustomfont.woff2') format('woff2'),
url('mycustomfont.woff') format('woff');
}

body {
font-family: 'MyCustomFont', sans-serif;
}

Google Fonts का उपयोग:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>कस्टम फॉन्ट्स का उदाहरण</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<h1>यह एक कस्टम फॉन्ट का उदाहरण है</h1>
<p>यह पैराग्राफ Roboto फॉन्ट का उपयोग कर रहा है।</p>
</body>
</html>

फॉन्ट्स का उदाहरण (Examples of Using Fonts)

नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि विभिन्न फॉन्ट्स का उपयोग कैसे किया जाता है।

उदाहरण 1: फॉन्ट फैमिली का उपयोग

body {
font-family: "Georgia, Times, 'Times New Roman', serif";
}

उदाहरण 2: कस्टम फॉन्ट्स का उपयोग (Google Fonts):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>कस्टम फॉन्ट्स का उदाहरण</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<h1>यह एक कस्टम फॉन्ट का उदाहरण है</h1>
<p>यह पैराग्राफ Open Sans फॉन्ट का उपयोग कर रहा है।</p>
</body>
</html>

इन उदाहरणों के माध्यम से, हमने सीखा कि CSS में फॉन्ट्स का उपयोग कैसे किया जाता है, फॉन्ट फैमिली को कैसे निर्दिष्ट किया जाता है, और कस्टम फॉन्ट्स को कैसे लागू किया जाता है। अगले सेक्शन में, हम टेक्स्ट के रंग और आकार को बदलने के बारे में जानेंगे।

टेक्स्ट का रंग और आकार (Text Color and Size)

टेक्स्ट का रंग बदलना (Changing Text Color)

CSS का उपयोग करके आप वेब पेज पर टेक्स्ट का रंग आसानी से बदल सकते हैं। टेक्स्ट का रंग बदलने के लिए color प्रॉपर्टी का उपयोग किया जाता है। आप रंग निर्दिष्ट करने के लिए रंग के नाम, हेक्साडेसिमल (hex) कोड, RGB, या HSL का उपयोग कर सकते हैं।

उदाहरण:

/* रंग का नाम */
p {
color: blue;
}

/* हेक्स कोड */
h1 {
color: #ff6347; /* Tomato color */
}

/* RGB */
h2 {
color: rgb(255, 165, 0); /* Orange color */
}

/* HSL */
h3 {
color: hsl(120, 100%, 25%); /* Green color */
}

टेक्स्ट का आकार बदलना (Changing Text Size)

CSS का उपयोग करके आप वेब पेज पर टेक्स्ट का आकार भी बदल सकते हैं। टेक्स्ट का आकार बदलने के लिए font-size प्रॉपर्टी का उपयोग किया जाता है। आप आकार निर्दिष्ट करने के लिए पिक्सल (px), इम (em), प्रतिशत (%), या रेम (rem) का उपयोग कर सकते हैं।

उदाहरण:

/* पिक्सल */
p {
font-size: 16px;
}

/* इम */
h1 {
font-size: 2em;
}

/* प्रतिशत */
h2 {
font-size: 150%;
}

/* रेम */
h3 {
font-size: 1.5rem;
}

टेक्स्ट रंग और आकार के उदाहरण (Examples of Text Color and Size)

नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि टेक्स्ट का रंग और आकार कैसे बदला जा सकता है।

उदाहरण 1: टेक्स्ट का रंग बदलना

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>टेक्स्ट का रंग बदलना</title>
<style>
p {
color: blue; /* रंग का नाम */
}
h1 {
color: #ff6347; /* हेक्स कोड */
}
h2 {
color: rgb(255, 165, 0); /* RGB */
}
h3 {
color: hsl(120, 100%, 25%); /* HSL */
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है (हेक्स कोड)</h1>
<h2>यह एक हेडिंग है (RGB)</h2>
<h3>यह एक हेडिंग है (HSL)</h3>
<p>यह एक पैराग्राफ है (रंग का नाम)</p>
</body>
</html>

उदाहरण 2: टेक्स्ट का आकार बदलना

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>टेक्स्ट का आकार बदलना</title>
<style>
p {
font-size: 16px; /* पिक्सल */
}
h1 {
font-size: 2em; /* इम */
}
h2 {
font-size: 150%; /* प्रतिशत */
}
h3 {
font-size: 1.5rem; /* रेम */
}
</style>
</head>
<body>
<h1>यह एक हेडिंग है (इम)</h1>
<h2>यह एक हेडिंग है (प्रतिशत)</h2>
<h3>यह एक हेडिंग है (रेम)</h3>
<p>यह एक पैराग्राफ है (पिक्सल)</p>
</body>
</html>

इन उदाहरणों के माध्यम से, हमने सीखा कि CSS का उपयोग करके टेक्स्ट का रंग और आकार कैसे बदला जा सकता है। अगले सेक्शन में, हम टेक्स्ट एलाइनमेंट के बारे में जानेंगे।

टेक्स्ट एलाइनमेंट (Text Alignment)

टेक्स्ट एलाइनमेंट का परिचय (Introduction to Text Alignment)

टेक्स्ट एलाइनमेंट का उपयोग CSS में टेक्स्ट को एक निश्चित दिशा में संरेखित करने के लिए किया जाता है। यह एक महत्वपूर्ण प्रॉपर्टी है जो आपके वेब पेज के टेक्स्ट को अधिक पठनीय और आकर्षक बनाती है। टेक्स्ट को लेफ्ट, राइट, सेंटर, या जस्टिफाई करके, आप अपने वेब पेज के लेआउट और डिज़ाइन को बेहतर बना सकते हैं।

लेफ्ट, राइट, सेंटर और जस्टिफाई (Left, Right, Center, and Justify)

लेफ्ट एलाइनमेंट (Left Alignment): लेफ्ट एलाइनमेंट डिफ़ॉल्ट टेक्स्ट एलाइनमेंट होता है, जहां टेक्स्ट बाएं किनारे के साथ संरेखित होता है।

p.left {
text-align: left;
}

राइट एलाइनमेंट (Right Alignment): राइट एलाइनमेंट का उपयोग करके, टेक्स्ट को दाएं किनारे के साथ संरेखित किया जाता है।

p.right {
text-align: right;
}

सेंटर एलाइनमेंट (Center Alignment): सेंटर एलाइनमेंट का उपयोग टेक्स्ट को केंद्र में संरेखित करने के लिए किया जाता है।

p.center {
text-align: center;
}

जस्टिफाई एलाइनमेंट (Justify Alignment): जस्टिफाई एलाइनमेंट का उपयोग टेक्स्ट को बाएं और दाएं किनारे दोनों के साथ संरेखित करने के लिए किया जाता है, जिससे टेक्स्ट के बीच का स्थान समान हो जाता है।

p.justify {
text-align: justify;
}

टेक्स्ट एलाइनमेंट के उदाहरण (Examples of Text Alignment)

नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि विभिन्न प्रकार के टेक्स्ट एलाइनमेंट का उपयोग कैसे किया जाता है।

उदाहरण:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>टेक्स्ट एलाइनमेंट के उदाहरण</title>
<style>
p.left {
text-align: left;
}
p.right {
text-align: right;
}
p.center {
text-align: center;
}
p.justify {
text-align: justify;
}
</style>
</head>
<body>
<h1>टेक्स्ट एलाइनमेंट के उदाहरण</h1>

<h2>लेफ्ट एलाइनमेंट</h2>
<p class="left">यह एक उदाहरण है जहां टेक्स्ट को लेफ्ट एलाइन किया गया है।</p>

<h2>राइट एलाइनमेंट</h2>
<p class="right">यह एक उदाहरण है जहां टेक्स्ट को राइट एलाइन किया गया है।</p>

<h2>सेंटर एलाइनमेंट</h2>
<p class="center">यह एक उदाहरण है जहां टेक्स्ट को सेंटर एलाइन किया गया है।</p>

<h2>जस्टिफाई एलाइनमेंट</h2>
<p class="justify">यह एक उदाहरण है जहां टेक्स्ट को जस्टिफाई एलाइन किया गया है। इस एलाइनमेंट का उपयोग टेक्स्ट को दोनों किनारों के साथ संरेखित करने के लिए किया जाता है, जिससे टेक्स्ट के बीच का स्थान समान हो जाता है और यह अधिक पठनीय हो जाता है।</p>
</body>
</html>

इन उदाहरणों के माध्यम से, हमने सीखा कि CSS का उपयोग करके टेक्स्ट को विभिन्न प्रकार से एलाइन कैसे किया जा सकता है। अगले सेक्शन में, हम टेक्स्ट सजावट (डेकोरेशन) के बारे में जानेंगे।

टेक्स्ट सजावट (Text Decoration)

टेक्स्ट डेकोरेशन का परिचय (Introduction to Text Decoration)

टेक्स्ट डेकोरेशन का उपयोग CSS में टेक्स्ट को सजाने और इसे अधिक आकर्षक बनाने के लिए किया जाता है। इस प्रॉपर्टी के माध्यम से आप टेक्स्ट को अंडरलाइन, ओवरलाइन, स्ट्राइकथ्रू और अन्य तरीकों से सजा सकते हैं। टेक्स्ट डेकोरेशन का उपयोग विशेष रूप से लिंक और हेडिंग्स के लिए किया जाता है, लेकिन इसे अन्य टेक्स्ट एलिमेंट्स पर भी लागू किया जा सकता है।

अंडरलाइन, ओवरलाइन, और स्ट्राइकथ्रू (Underline, Overline, and Strikethrough)

अंडरलाइन (Underline): अंडरलाइन का उपयोग टेक्स्ट के नीचे एक लाइन खींचने के लिए किया जाता है। यह विशेष रूप से लिंक के लिए उपयोगी है।

p.underline {
text-decoration: underline;
}

ओवरलाइन (Overline): ओवरलाइन का उपयोग टेक्स्ट के ऊपर एक लाइन खींचने के लिए किया जाता है।

p.overline {
text-decoration: overline;
}

स्ट्राइकथ्रू (Strikethrough): स्ट्राइकथ्रू का उपयोग टेक्स्ट के माध्यम से एक लाइन खींचने के लिए किया जाता है, जो यह दर्शाता है कि टेक्स्ट को हटा दिया गया है या यह अप्रासंगिक है।

p.strikethrough {
text-decoration: line-through;
}

टेक्स्ट डेकोरेशन के उदाहरण (Examples of Text Decoration)

नीचे दिए गए उदाहरणों के माध्यम से हम देखेंगे कि विभिन्न प्रकार की टेक्स्ट डेकोरेशन का उपयोग कैसे किया जाता है।