इस Tutorial में हम आपको CSS Text Property की पूरी जानकारी देंगे. अध्ययन की सुविधा के लिए हमने इस Tutorial को निम्न भागों में बांटा हैं.
Table of Content
Introduction to CSS Text Property
CSs Text Property का इस्तेमाल Text की Look को नियंत्रित करने के लिए किया जाता हैं. आप Text की Visual Appearance को Customize कर सकते हैं.
Text को Style करने के लिए बहुत सारी Text Properties CSS द्वारा उपलब्ध करवाई जाती हैं. आप Text Color, Decoration, Word Space आदि Style को अपनी आवश्यकतानुसार Customize कर सकते हैं.
Different Type of CSS Text Properties
CSS द्वारा Text की Visual Appearance को नियंत्रित करने के लिए बहुत सारी Text Properties Provide करवाई जाती हैं. इनके बारे में विस्तार से नीचे बताया जा रहा हैं.
color Property
Color Property का इस्तेमाल Text को Color करने के लिए किया जाता हैं. आप इसे अलग-अलग HTML Element पर Apply कर सकते हैं. यदि आप पूरे डॉक्युमेंट में एक ही कलर का Text Use करना चाहते हैं, तो Color को Body Element पर Apply किया जाता हैं. और यदि आप Different Element का Different Color चाहते हैं. तब इसे Particular Element पर Define करना चाहिए.
इसे Try कीजिए
<html>
<head>
<title>CSS Color Property</title>
</head>
<body>
<p style=”color:red;”>
This Paragraph Text is Red.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text is Red.
text-direction Property
इस Property द्वारा Document Content की Direction यानि दिशा को Define किया जाता हैं. By Default Text Direction बांये से दांये होती हैं. text-direction Property की दो संभावित Values होती हैं.
- ltr – इसका मतलब Left to Right होता हैं. इस Value से Text Browser Window में बांई तरफ से शुरु होत हैं. और दांए तरफ जाता हैं.
- rtl – इसका मतलब Right to Left होता हैं. इस Value से Text Browser Window में दांई तरफ से शुरु होता हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS text-direction Property</title>
</head>
<body>
<p;”>
This Paragraph Text Direction is Normal.
</p>
<p style=”text-direction: rtl;”;”>
This Paragraph Text Direction is Right to Left.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Direction is Normal.
This Paragraph Text Direction is Right to Left.
letter-spacing Property
इस Property द्वारा Characters (अक्षर) के बीच दूरी को नियंत्रित किया जाता हैं. इसकी Default Value Normal होती हैं. जिसे आप Length Define करके Adjust कर सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS letter-spacing Property</title>
</head>
<body>
<p;”>
This Paragraph Characters is Normal.
</p>
<p style=”letter-spacing: 5px;”>
This Paragraph Characters is Spaced is 5px.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Characters is Normal.
This Paragraph Characters is Spaced 5px.
word-spacing Property
इस Property द्वारा Words के बीच दूरी को नियंत्रित किया जाता हैं. इसकी भी default Value Normal होती हैं. जिसे आप Length Define करके Adjust कर सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS word-spacing Property</title>
</head>
<body>
<p;”>
This Paragraph Text Space is Normal.
</p>
<p style=”word-spacing: 10px;”>
This Paragraph Text Space is 10px.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Space is Normal.
This Paragraph Text Space is 10px.
text-indent Property
इस Property द्वारा Paragraphs की पहली Line की दूरी को नियंत्रित किया जाता हैं. यानि आप ब्राउजर विन्डो से पहली Line की कितनी दूरी रखना चाहते हैं. इसकी भी Default Value Normal होती हैं. जिसे आप Define करके बदल सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS text-indent Property</title>
</head>
<body>
<p;”>
This Paragraph Indent is Normal.
</p>
<p style=”text-indent: 30px;>
This Paragraph is 30px Indented.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Indent is Normal.
This Paragraph is 30px Indented.
text-align Property
इस Property द्वारा Text का Alignment Set किया जाता हैं. इसकी संभावित Value right, left, center और justify होती हैं. By Default इसकी Value left Aligned होती हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS text-align Property</title>
</head>
<body>
<p style=”text-align:left;”>
This Paragraph is Left Aligned.
</p>
<p style=”text-align: right;”>
This Paragraph is Right Aligned.
</p>
<p style=”text-align: center;”>
This Paragraph is Center Aligned.
</p>
<p style=”text-align: justify;”>
This Paragraph is Justify Aligned.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph is Left Aligned.
This Paragraph is Right Aligned.
This Paragraph is Center Aligned.
This Paragraph is Justify Aligned.
text-decoration Property
इस Property द्वारा Text की सजावट की जाती हैं. इसकी चार संभावित Values होती हैं. none, underline, overline और line-through. आप आवश्यकतानुसार किसी एक का इस्तेमाल कर सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS text-decoration Property</title>
</head>
<body>
<p style=”text-decoration:none;”>
This Paragraph Text is Normal.
</p>
<p style=”text-decoration: underline;”>
This Paragraph Text is Underlined.
</p>
<p style=”text-decoration: overline;”>
This Paragraph Text is Over lined.
</p>
<p style=”text-decoration: line-through;”>
This Paragraph Text has a Line Through.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text is Normal.
This Paragraph Text is Underlined.
This Paragraph Text is Over Lined.
This Paragraph Text has a Line Through.
text-transform Property
इस Property द्वारा Text Case को नियंत्रित किया जाता हैं. इसकी चार संभावित Values होती हैं. none, uppercase, lowercase और capitalize.
इसे Try कीजिए
<html>
<head>
<title>CSS text-transform Property</title>
</head>
<body>
<p style=”text-transform:none;”>
This paragraph text is normal.
</p>
<p style=”text-transform: uppercase;”>
This Paragraph Text is in Uppercase.
</p>
<p style=”text-transform: lowercase;”>
This Paragraph Text is in Lowercase.
</p>
<p style=”text-transform: capitalize;”>
This Paragraph Text Will be Capitalized.
</p>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This paragraph text is normal.
This Paragraph Text is in Uppercase.
This Paragraph Text is in Lowercase.
This Paragraph Text Will Be Capitalized.
text-shadow Property
इस Property द्वारा Text Shadow को नियंत्रित किया जाता हैं. आप किसी भी HTML Element केलिए Shadow Define कर सकते हैं.
इसे Try कीजिए
<html>
<head>
<title>CSS text-shadow Property</title>
</head>
<body>
<h1 style=”text-shadow: 3px 2px red;”>
This Paragraph Text Has a Shadow Effect.
</h1>
</body>
</html>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
This Paragraph Text Has a Shadow Effect.
आपने क्या सीखा?
इस Tutorial में हमने आपको CSS Text Property के बारे में पूरी जानकारी दी हैं. आपने विभिन्न Text Properties का अध्ययन किया हैं. हमे उम्मीद हैं कि यह Tutorial आपके लिए उपयोगी साबित होगा.
#BeDigital