CSS Text Property in Hindi
Text Property css में एक जरुरी property है जो text के look को style करता है | वेबसाइट में text की visual appearance को control करने के लिए css text property का इस्तेमाल होता है |
Text property कई properties का समारोह है जिसे हम इस आर्टिकल में एक एक करके समझेंगें | तो पहले जानते हैं क्या क्या properties है इस ग्रुप में |
CSS Text Properties Type
- Text Color Property
- Letter Spacing
- Word Spacing
- Indent Property
- Text-Align
- Text-Decoration
- Text-Transform
- Text-Shadow
1) CSS Text Color Property
CSS Text Color Property के जरिये text को नयी color दी जाती है या फिर उसकी color को बदली जाती है | color property के नाम से text-color दी जाती है |
Syntax- color : value;
उदाहरण
p{color : green;}
<p>change text color from black to green</p>2) Letter Spacing
Letter Spacing के जरीये शब्दों के अक्षरों के बिच दुरी को नियंत्रित किया जा सकता है | शब्दों के बिच कितना गैप रखना है उसे इस property के बताई जाती है | इस property को letter-spacing नाम से लीखी जाती है |
उदाहरण:
<html>
<head>
<title>CSS Text Property</title>
<style>
#p1{letter-spacing:5px;}
</style>
</head>
<body>
<p>css text sample without letter spacing</p>
<p id="p1">css text with letter spacing</p>
</body>
</html>
output:
3) Word Spacing
Word Spacing के जरीये शब्दों (words) के बिच दुरी को नियंत्रित किया जा सकता है | इस property को word-spacing के जरिये लीखी जाती है |
उदाहरण:
<html>
<head>
<title>CSS Text Property</title>
<style>
p{word-spacing:8px;}
</style>
</head>
<body>
<p>css text with word spacing</p>
</body>
</html>
output:
4) Indent Property
indent property के जरिये पहली line की text की दुरी को नियंत्रित की जा सकती है | अगर आप चाहते हैं की पेहली text line window screen से थोड़ी दुरी में दिखे तो आप उसे इस indent property के जरिये दिखा सकते हैं |
<html>
<head>
<title>CSS Text Property</title>
</head>
<body>
<p style="text-indent:25px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
</p>
</body>
</html>
आप आउटपुट में देखिये पहली पैराग्राफ की पहली line window screen से थोड़ी दुरी से सुरु हुयी है | और दूसरी पैराग्राफ window screen पे normal तरीके से सुरु हुयी है |
5) Text-Align Property
Text-Align property से text को alignment दी जाती है | CSS में 4 तरह की alignment होती है:
- Left Alignment
- Right Alignment
- Center Alignment
- Justify Alignment
Left Align
css में left-align, text की default alignment property होती है | इस में text left side पूरी तरह से align होती है मतलब एक line में सजी होती है, और right side में आगे पीछे होकर text line दिखती है |
Right Align
right-align में text, right side में पूरी तरह से align होती है यानि एक line में सजी होती है, और left side में आगे पीछे होकर text line दिखती है |
Center Align
center-align में text, center में पूरी तरह से align होती है |और left और right दोनों side से आगे पीछे होकर text line दिखती है |
Justify Align
justify-align में text, पूरी तरह से एक line में सजी हुयी होती है | इस property में text right side, left side और center हर तरफ से align होती है |
चलिए इन 4 alignment को एक उदाहरण से समझते हैं |
उदाहरण:
<html>
<head>
<title>Internal Stylesheet Type</title>
<style>
#p1{ text-align:left;}
#p2{ text-align:right;}
#p3{ text-align:center;}
#p4{ text-align:justify;}
</style>
</head>
<body>
<p id="p1">
left-align paragraph. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
<hr>
<p id="p2">
right-align paragraph. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
<hr>
<p id="p3">
center-align paragraph.The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
<hr>
<p id="p4">
justify-align paragraph. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those
interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced
in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
</p>
</body>
</html>
output:
6) CSS Text Decoration Property
Text-decoration property से text के साथ decorated line लगा सकते हैं | यानि text को ज्यादा decoration देंने में इस property का इस्तेमाल होता है | इसमें text के ऊपर या निचे line लगा सकते हैं | या फिर text के बिच में से एक line खिंच सकते हैं | जिससे लगेगा text कटा हुआ है जिसे strikethrough कहा जाता है |
text-decoration peoperty की 4 value होती है:
- underline – इस value से text के निचे line लगा सकते हैं |
- overline – इस value से text के ऊपर line लगा सकते हैं |
- line-through – इस value से text के बिच line खिंच सकते हैं |
- none – अगर कोई line नहीं लगनी या decoration line हटानी है, तो इस value को लिखी जाती है |
उदाहरण:
<html>
<head>
<title>CSS Text Property</title>
</head>
<body>
<p style="text-decoration:underline; color:darkred;">text-decoration underline sample</p>
<p style="text-decoration:overline;color:blue;">text-decoration overline sample</p>
<p style="text-decoration:line-through; color:green;">text-decoration line-through sample</p>
<p style="text-decoration:none;">text-decoration none sample</p>
</body>
</html>
output:
7) Text-transform property
text-transform property से text को छोटा , बड़ा या capitalise कर सकतें हैं | इसमें 3 value होतें हैं :
- lowercase: इसमें शब्द के सारे अक्षर छोटे (lowercase में) होतें हैं |
- uppercase: इसमें शब्द के सारे अक्षर बड़े (uppercase में) होतें हैं |
- capitalize: इसमें शब्द की पहली अक्षर बड़ी और अन्य सारे अक्षर छोटे होतें हैं |
उदाहरण:
<html>
<head>
<title>CSS Text Property</title>
</head>
<body>
<p style="text-transform:lowercase; color:darkred;">ABC SITE</p>
<p style="text-transform:uppercase; color:blue;">text all in small</p>
<p style="text-transform:capitalize; color:green;">few sample code</p>
</body>
</html>
output:
8) text-shadow property
text-shadow property से text में shadow लगायी जाती है | Shadow को horizontal या vertical दोनों तरफ से सेट किया जा सकता है |
Syntax
text-shadow: h-shadow v-shadow blur-radius color;
- h-shadow : इस value से horizontal shadow की value को सेट की जाती है | और ये shadow दायीं से बायीं की तरफ सेट होती है |
- v-shadow : इस value से vertical shadow को सेट की जाती है | और ये shadow निचे से ऊपर की तरफ सेट होती है |
- blur-radius: ये value shadow कितना धुन्दला(blur) या sharp दिखाना है वो बताता है |
- color: color property से shadow को कलर करने के लिए इस्तेमाल होता है | कलर का नाम लिख सकते हैं या फिर RGB या HEXA Code से color सेट कर सकते हैं |
अगर h-shadow को बायीं(left) तरफ करना है तो value negative क्रम में लिखे जैसे -5px, -4px आदि | और अगर दायीं(right) तरफ रखना है तो, value को positive क्रम से दें जैसे 6px, 5px, 4px आदि |
उसी तरह अगर v-shadow को ऊपर की तरफ करना है तो value negative क्रम में लिखे और अगर निचे की तरफ करना है तो value को positive क्रम से दें | निचेके उदाहरण और उसके आउटपुट से आप अच्छे से समझ पायेंगे
<html>
<head>
<title>CSS Text Shadow</title>
<style>
h1{
font-family:arial;
text-shadow: -3px -3px 3px blue;
}
h2{
font-family:arial;
text-shadow: 3px 3px 5px red;
}
</style>
</head>
<body>
<h1>CSS Text-Shadow Tutorial Example</h1>
<h2>CSS Text-Shadow Tutorial Example</h2>
</body>
</html>
output:
*नॉटपॉइंट : css text-shadow property एक advanced property है जिसे CSS3 में, introduce किआ गया है | इसीलिए ये property पुराने browser में support नहीं करती है |