CSS text properties in hindi-css टेक्स्ट प्रॉपर्टीज क्या है?

by

हेल्लो दोस्तों आज के इस पोस्ट में आपको CSS text properties in hindi के बारे में बताया गया है की क्या होता है कैसे काम करता है तो चलिए शुरू करते है

Introduction to CSS Text Properties

CSS के द्वारा आप web page के text को भी design कर सकते है। इसके लिए CSS आपको बहुत सी properties provide करती है।

कई बार designers font properties और text properties के बीच confuse हो जाते है। इसलिए text properties के बारे में detail से जानने से पहले आइये देखते है की इन दोनों में क्या difference होता है।

Fonts shape को represent करते है, जैसे की अलग अलग font families (Times New Roman आदि) की shapes अलग अलग होती है। अलग अलग shapes के साथ जो आप character draw करते है वे text(a,b,c,d @,# आदि) कहलाते है।

Webpage में text को style करने के लिए CSS आपको निचे दी गयी properties provide करती है।

  1. color 
  2. text-align
  3. text-decoration
  4. text-transform
  5. text-indent
  6. text-direction
  7. text-shadow
  8. word-spacing
  9. letter-spacing

आइये अब इन properties के बारे में detail से जानने का प्रयास करते है। 

color Property 

ये property text का color set करने के लिए यूज़ की जाती है। इसे आप different HTML elements पर apply कर सकते है। यदि आप इसे <body> tag पर apply करते है तो जो value आप इस property की देते है वही color webpage के सारे text का हो जाता है।

इस property की value के रूप में आप color का नाम या उसकी hex value दे सकते है। इसका उदाहरण निचे दिया जा रहा है। 

<html>
<head>
<title>color property</title>
<style>
div
{
    width:20%;
}
p 
{
   color:blue;
}
</style>
</head>   <body>
<div>
<p>This is a paragraph. Its text color is blue.</p>
</div>
</body>
</html>

ऊपर दिए गए उदाहरण में सभी paragraph text का color blue set किया गया है। ये उदाहरण निचे दिया गया output generate करता है।

text-align

इस property के द्वारा आप text का webpage में alignment set करते है। इस property की आप निचे दी गयी 4 में से कोई भी एक value define कर सकते है।

  1. left – इस value से text left side में align हो जाता है।  
  2. right – इस value के द्वारा text right side में align हो जाता है।  
  3. justify – इस value के द्वारा आप text को book की तरह align कर सकते है।  
  4. center – ये text को center में align करती है।   

इसका उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>text align example</title>   <style> div
{
    width:20%;
    border:2px solid blue;
} p 
{
     text-align:center;
}
</style> </head> <body>
<div>
<p> paragraph</p>
</div>
</body> </html> 

ऊपर दिए गए उदाहरण में webpage के सभी paragraphs का alignment center set किया गया है। ये उदाहरण निचे दिया गया output generate करता है।

इसे भी पढ़े –CSS link Properties in hindi-css लिंक प्रॉपर्टीज क्या है?

text-decoration 

इस property के द्वारा आप text को decorate कर सकते है। जैसे की text के निचे underline define करना आदि। निचे दी गयी 4 values में से आप इस property की कोई भी value set कर सकते है। 

  1. none – इस value से text पर कोई भी decoration नहीं रहता है।  
  2. underline – इस value को set करने से text के नीचे line appear हो जाती है।  
  3. overline – इस value को apply करने पर text के ऊपर line appear हो जाती है।  
  4. line-through – इस value को यूज़ करने पर text को काटती हुई बीच से line खींच जाती है। 

निचे इसका उदाहरण दिया जा रहा है। 

<html>
<head>
<title>Text decoration property</title>   <style>
p
{
     text-decoration:underline;
     color:blue;
}
</style> </head> <body>
<p>Some text</p>
</body> </html>

ऊपर दिए गए उदाहरण में सभी paragraph के text को underline किया गया है। ऊपर दिया गया उदाहरण निचे दिया गया output generate करता है।

text-transform

इस property के द्वारा आप text का case set कर सकते है। आप चाहे तो text को upper case में show कर सकते है या फिर lower case में show कर सकते है। निचे दी गयी 4 values में से आप कोई भी value इस property की set कर सकते है। 

  1. none
  2. uppercase
  3. lowercase
  4. capitalize

इस property का उदाहरण निचे दिया जा रहा है। 

<html>
<head>
<title> Text transform property</title>   <style>
p
{
   text-transform:uppercase;
} 
</style> </head> <body>
<p>This is some text</p>
</body>
</html>

ऊपर दिए गए उदाहरण में सभी paragraphs के text को uppercase में transform किया गया है। इसका output निचे दिया जा रहा है।

text-indent

इस property के द्वारा आप paragraph की first line का indent set कर सकते है। Indent paragraph की first line में extra space होता है जो उस line को दूसरी lines से अलग show करता है। इस property की value आप length में या फिर percentage में दे सकते है। इसका उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>Text indent example</title>   <style>
div
{
    width:20%;
    border: 1px solid;
} p
{
   text-indent:20px;
}
</style> </head> <body>
<div>
<p>This is a paragraph. It show use
of text indent property in CSS.</p>
</div>
</body> </html> 

ऊपर दिए गए उदाहरण में webpage के सभी paragraph की first line का indent 20 pixels set किया गया है। इसका output निचे दिया जा रहा है।

direction 

इस property के द्वारा आप text का direction set करते है। यानी की आप text को किस तरफ से लिखना शुरू करना चाहते है। ये बाँयी और से दाँयी और भी हो सकता है और दाँयी और से बाँयी और भी हो सकता है। निचे दी गयी values में से आप कोई भी value इस property की set कर सकते है। 

  1. ltr – इस value के द्वारा आप text का direction left से right set करते है।  
  2. rtl – इस property के द्वारा आप text का direction right से left set करते है।  
  3. initial – इस property के द्वारा आप text का default direction set कर सकते है।  
  4. inherit – जब आप ये value set करते है तो text का direction parent element जैसा ही होता है। 

इसका उदाहरण निचे दिया जा रहा है। 

<html>
<head>
<title>Text direction demo</title>   <style>
div
{
    width:20%;
    border:1px solid;
} p
{
   direction:rtl;
} 
</style> </head> <body>
<div>
<p>Example showing use of text
direction property</p>
</div>
</body> </html>

ऊपर दिए गए उदाहरण में webpage के paragraphs का direction right से left set किया गया है। इसका output निचे दिया जा रहा है।

reference-https://www.geeksforgeeks.org/css-text-formatting/

CSS text properties in hindi

निवेदन-अगर आपको यह आर्टिकल(CSS text properties in hindi) अच्छा लगा हो तो आप इस पोस्ट को अपने दोस्तों के साथ जरुर शेयर() करे और आपको जिस टॉपिक(CSS text properties in hindi) पर आपको पढना या नोट्स चाहिए तो हमें जरुर कमेंट(Channels of Distribution in hindi) करे आपका कमेंट्स हमारे लिए बहु मूल्य है धन्यवाद

Leave a Comment