CSS Text Property (In Hindi)
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 करना चाहिए।
<html>
<head>
<title>CSS Color Property</title>
</head>
<body>
<p style="color:red";>
SUNRISE COMPUTER CLASSES //Red In Color
</p>
</body>
</html>
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 में दांई तरफ से शुरु होता हैं।
<html>
<head>
This Paragraph Text Direction is Right to Left.
<title>CSS text-direction Property</title></head>
<body>
</p><p style=”text-direction: rtl;”;”>
<p;”>This Paragraph Text Direction is Normal. </p>
</body>
</HTML>
OUTPUT-
Letter-Spacing Property
इस Property द्वारा Characters (अक्षर) के बीच दूरी को नियंत्रित किया जाता हैं। इसकी Default Value Normal होती हैं। जिसे Length Define करके Adjust कर सकते हैं।
<html>
<head>
<title>CSS letter-spacing Property</title>
<body>
</body>
</html>
<p;”>
This Paragraph Characters is Normal.
</p>
<p style=”letter-spacing: 5px;”>
</p>
</head>
OUTPUT-
Word-Spacing Property
इस Property द्वारा Words के बीच दूरी को नियंत्रित किया जाता हैं। इसकी भी default Value Normal होती हैं। जिसे आप Length Define करके Adjust कर सकते हैं।
<html>
<head>
</head>
<body>
<p;”>
This Paragraph Text Space is Normal.
</p>
<p style=”word-spacing: 10px;”>
This Paragraph Text Space is 10px.
</p>
</body>
</html>
<title>CSS word-spacing Property</title>
Text-Indent Property
इस Property द्वारा Paragraphs की पहली Line की दूरी को नियंत्रित किया जाता हैं। यानि आप ब्राउजर विन्डो से पहली Line की कितनी दूरी रखना चाहते हैं। इसकी भी Default Value Normal होती हैं। जिसे आप Define करके बदल सकते हैं।
<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>
OUTPUT-
Text-Align Property
इस Property द्वारा Text का Alignment Set किया जाता हैं। इसकी संभावित Value right, left, center और justify होती हैं। By Default इसकी Value left Aligned होती हैं.
<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>
OUTPUT-
Text-Decoration Property
इस Property द्वारा Text की सजावट की जाती हैं। इसकी चार संभावित Values होती हैं। None, Underline, Overline और Line-Through.
<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>
Text-Transform Property
इस Property द्वारा Text Case को नियंत्रित किया जाता हैं। इसकी चार संभावित Values होती हैं।None, Uppercase, Lowercase और Capitalize.
<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>
Text-Shadow Property
इस Property द्वारा Text Shadow को नियंत्रित किया जाता हैं। आप किसी भी HTML Element केलिए Shadow Define कर सकते हैं।
<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>
OUTPUT-
For Any Doubt Clear on Telegram Discussion Group
No comments:
Post a Comment