Introduction of Text Property in CSS
इस लेख मे हम Text Property in CSS के बारे मे detail मे जानेंगे।
Text Property in CSS की मदद से आप Web Page के text को style कर सकते है मतलब की आप text की look को नियंत्रित कर सकते है।
Text को style करने के लिए कई सारी CSS Property का इस्तेमाल होता है और इन सभी Text property को हम Example के जरिये समझने की कौशिश करेंगे।
CSS Text Color in Hindi
इस property की मदद से आप text के color को set कर सकते है।
CSS colors को आप
- color name जैसे की “red”
- Hex code जैसे की “#fff000”
- RGB value जैसे की “rgb(255,0,0)” से declare कर सकते हो।
अगर आपको अलग अलग color के value की list चाहिए तो आप CSS Colors को read करे।
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h3 {
color: red;
}
</style>
</head>
<body>
<h3>Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>Another paragraph.</p>
</body>
</html>आप text color और Background color दोनों को साथ मे भी apply कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
color: blue;
}
h3 {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<p>Another paragraph.</p>
</body>
</html>CSS Text Alignment in Hindi
Text के alignment के लिये text-align property का इस्तेमाल होता है। इसमे चार प्रकार की possible value हो सकती है।
- left – text को left मे align करता है।
- right – text को right मे align करता है।
- center – text को center मे align करता है।
- justify – text को justify करता है। इसमे प्रत्येक line को बढ़ाया जाता है ताकि हर line मे समान width हो।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-align: center;
}
h4 {
text-align: left;
}
h5 {
text-align: right;
}
p {
border: 1px solid black;
padding: 10px;
width: 200px;
height: 200px;
text-align: justify;
}
</style>
</head>
<body>
<h3> 1.center Heading </h3>
<h4>2.left Heading </h4>
<h5>3.right Heading</h5>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>CSS Text Direction in Hindi
Direction property की मदद से आप document content की direction को define कर सकते है। इस property की दो तरह की संभवित Value होती है।
rtl – इसका मतलब right to left होता है। इस value की मदद से text browser मे right side से शुरू होता है।
ltr – इसका मतलब left to right होता है। इस value की मदद से text browser मे left side से शुरू होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
direction: rtl;
}
</style>
</head>
<body>
<h3>text direction - Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>CSS Vertical Alignment in Hindi
इस property की मदद से आप text को vertically alignment कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
img.top {
vertical-align: top;
}
img.middle {
vertical-align: middle;
}
img.bottom {
vertical-align: bottom;
}
</style>
</head>
<body>
<p>An image with<img src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook"> a default alignment.</p><br>
<p>An image with<img class="top" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook"> a top alignment.</p><br>
<p>An image with <img class="middle" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook"> a middle alignment.</p><br>
<p>An image with <img class="bottom" src="https://compressjpeg.com/images/compressjpeg/icon.png" alt="megatechbook" > a bottom alignment.</p>
</body>
</html>CSS Text Decoration in Hindi
इस property की मदद से आप text को decorate कर सकते है। इसकी चार संभवित value इस प्रकार से है। none, underline, overline और line-through.
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-decoration: overline;
}
h4 {
text-decoration: line-through;
}
h5 {
text-decoration: underline;
}
h6 {
text-decoration: none;
}
</style>
</head>
<body>
<h3>overline text </h3>
<h4>line-through text </h4>
<h5>underline text</h5>
<h6>none text</h6>
</body>
</html>Text Transformation in Hindi
इस property की मदद से text के case को define किया जाता है। इसकी चार संभवित value इस प्रकार से है। uppercase, lowercase, capitalize, and none.
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
text-transform: uppercase;
}
h4 {
text-transform: lowercase;
}
h5 {
text-transform: capitalize;
}
h6 {
text-transform: none;
}
</style>
</head>
<body>
<h3>uppercase text </h3>
<h4>LOWERCASE text </h4>
<h5>capitalize text</h5>
<h6>none text</h6>
</body>
</html>CSS Text Indentation in Hindi
इस property की मदद से आप paragraph की पहली line की दूरी को define कर सकते है। इसके लिये text-indent property का इस्तेमाल होता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 70px;
}
</style>
</head>
<body>
<h3>CSS Text indentation-Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>CSS Letter spacing in Hindi
letter-spacing property की मदद से आप दो character के बीच की दूरी को define कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h3.ex1 {
letter-spacing: 3px;
}
h3.ex2 {
letter-spacing: -3px;
}
</style>
</head>
<body>
<h3 class="ex1">CSS Letter Spacing - Text Property in CSS </h3>
<h3 class="ex2">CSS Letter Spacing - Text Property in CSS </h3>
</body>
</html>CSS Line Height in Hindi
line-height property दो line के बीच की space को define करती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
line-height: 2.8;
}
</style>
</head>
<body>
<h3>CSS Line Height - Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>CSS Word Spacing in Hindi
word-spacing property दो word के बीच के space को define करती है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
p {
word-spacing: 10px;
}
</style>
</head>
<body>
<h3>CSS Word Spacing - Text Property in CSS </h3>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</body>
</html>CSS Text Shadow in Hindi
text-shadow property की मदद से text मे shadow add कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h2>CSS Text Shadow - Text Property in CSS</h2>
</body>
</html>इस उदाहरण मे horizontal shadow 2px और vertical shadow 2px specify किया है।
अगर आप shadow का color define करना चाहते है तो इस प्रकार से define कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h2>CSS Text Shadow - Text Property in CSS</h2>
</body>
</html>अगर आप blur effect add करना चाहते है तो इस प्रकार से add कर सकते है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
text-shadow: 2px 2px 4px red;
}
</style>
</head>
<body>
<h2>CSS Text Shadow - Text Property in CSS</h2>
</body>
</html>