हेल्लो दोस्तों! आज हम इस आर्टिकल में CSS text properties के बारें में पढेंगे. इसे बहुत ही आसान भाषा में लिखा गया है. इसे आप पूरा पढ़िए, यह आपको आसानी से समझ में आ जायेगा. तो चलिए शुरू करते हैं:-
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 करवाई जाती हैं. इनके बारे में विस्तार से नीचे बताया जा रहा हैं.
1. Color Property –
Color Property का इस्तेमाल Text को Color करने के लिए किया जाता हैं. आप इसे अलग-अलग HTML Element पर Apply कर सकते हैं. यदि आप पूरे डॉक्युमेंट में एक ही कलर का Text Use करना चाहते हैं, तो Color को Body Element पर Apply किया जाता हैं. और यदि आप Different Element का Different Color चाहते हैं. तब इसे Particular Element पर Define करना चाहिए.
इसे Try कीजिए –
<!DOCTYPE html>
<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.
2. 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 कीजिए-
<!DOCTYPE html> <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.
3. letter-spacing Property-
इस Property द्वारा Characters (अक्षर) के बीच दूरी को नियंत्रित किया जाता हैं. इसकी Default Value Normal होती हैं. जिसे आप Length Define करके Adjust कर सकते हैं.
इसे Try कीजिए-
<!DOCTYPE html> <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.
T h i s P a r a g r a p h C h a r a c t e r s i s S p a c e d 5 p x .
4. word-spacing Property
इस Property द्वारा Words के बीच दूरी को नियंत्रित किया जाता हैं. इसकी भी default Value Normal होती हैं. जिसे आप Length Define करके Adjust कर सकते हैं.
इसे Try कीजिए-
<!DOCTYPE html> <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.
5. text-indent Property-
इस Property द्वारा Paragraphs की पहली Line की दूरी को नियंत्रित किया जाता हैं. यानि आप ब्राउजर विन्डो से पहली Line की कितनी दूरी रखना चाहते हैं. इसकी भी Default Value Normal होती हैं. जिसे आप Define करके बदल सकते हैं.
इसे Try कीजिए-
<!DOCTYPE html> <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.
6. text-align Property –
इस Property द्वारा Text का Alignment Set किया जाता हैं. इसकी संभावित Value right, left, center और justify होती हैं. By Default इसकी Value left Aligned होती हैं.
इसे Try कीजिए
<!DOCTYPE html> <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.
7. text-decoration Property –
इस Property द्वारा Text की सजावट की जाती हैं. इसकी चार संभावित Values होती हैं. none, underline, overline और line-through. आप आवश्यकतानुसार किसी एक का इस्तेमाल कर सकते हैं.
इसे Try कीजिए-
<!DOCTYPE html> <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.
8. text-transform Property –
इस Property द्वारा Text Case को नियंत्रित किया जाता हैं. इसकी चार संभावित Values होती हैं. none, uppercase, lowercase और capitalize.
इसे Try कीजिए-
<!DOCTYPE html> <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 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.
9. text-shadow Property –
इस Property द्वारा Text Shadow को नियंत्रित किया जाता हैं. आप किसी भी HTML Element केलिए Shadow Define कर सकते हैं.
इसे Try कीजिए –
<!DOCTYPE html> <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>
ऊपर दिया कोड इस प्रकार का परिणाम देगा.
