CSS Text Properties in Hindi – टेक्स्ट Formatting कैसे करें?

CSS Text Properties in Hindi

आज हम इस article में जानेंगे की कैसे हम अपने website के text appearance को stylesheet के जरिये control कर सकते हैं और आवश्यकता के अनुसार उसकी formatting कर सकते हैं।

CSS की text properties से हम अपने web page के text को style कर सकते हैं, इसके द्वारा कई सारे parameters जैसे की alignment, indenting, spacing आदि को set कर सकते हैं।

आज हम कई प्रकार के अलग-अलग text-properties जो की CSS में use होते हैं के बारे में जानेंगे और उनको examples के जरिये समझने की कोशिश करेंगे।

यह भी पढ़ें: पूरा CSS सीखें हिंदी में

CSS Text Properties in Hindi

CSS में कई तरह के text properties हैं जिसका उपयोग करके हम text appearance को control कर सकते हैं, जो की कुछ इस प्रकार हैं:

• color property
• text-align
• text-decoration
• text-transform
• word-spacing
• letter-spacing
• text-indent
• text-shadow
• line-height

अब चलिए हम इन properties को एक-एक कर समझने की कोशिश करेंगे:

CSS Color Property

इस property से हम बड़ी आसानी से text में color apply कर सकते हैं| जब हम किसी HTML element पर इस प्रॉपर्टी को apply करते हैं तो उस element के अंदर के सारे text पर यह apply हो जाता है जैसे यदि हमे अपने page के सारे text पर एक ही color set करनी है तो हम इस property को body tag पर apply करेंगे| इसकी value तीन तरीके से specify किया जा सकता है:

•  HEX value से
•  RGB value या
•  Color name से

इसका example आप निचे देख सकते हैं:

 p{color:#ccc;}  

text-align

आपने html में align attribute use किया होगा, यह प्रॉपर्टी भी उसी की तरह है इससे हम टेक्स्ट की alingment set कर सकते हैं| इसकी 4 प्रकार की value हो सकती है:
1. left : text को left में align करने के लिए
2. right : right alignment के लिए
3. center: टेक्स्ट को center में दिखाने के लिए
4. justify: text को justify करने के लिए

इसका एक उदाहरण आप निचे देख सकते हैं:

 p{text-align:right;}  

text-decoration

इस property के द्वारा आप text के decoration को control कर सकते हैं जैसे की strike-throughs, underlining,  overlining आदि|
इसके 4 possible values हो सकते हैं:

1. none : text के सारे decoration को हटाने के लिए
2. underline: text के निचे underline डालने के लिए
3. overline: text के ऊपर line खीचने के लिए
4. line-through: text के बीच में line जो की लाइन को कट करने के लिए उपयोग होता है

निचे आप इसका example देख सकते हैं:

 p{text-decoration:underline;}  

text-transform

text-transform से हम text के case को change कर सकते हैं| हम टेक्स्ट को capital, lowercase या हर word के पहले letter को capitalize कर सकते हैं|
इस प्रॉपर्टी के भी 4 options हो सकते हैं:

1. capitalize : हर शब्द के first character को uppercase में बदल देता है
2. uppercase : सारे characters uppercase में बदल जाते हैं
3. lowercase : सभी text को lowercase में set करने के लिए उपयोग होता है
4. none : यह by default value होती है

Example:

 p{text-transform:uppercase;}  

word-spacing

प्रत्येक word के बीच by default space को हम modify कर सकते हैं उनके बीच की spacing कितनी होगी यह हम word-spacing property से define कर सकते हैं|
इसकी value या तो normal हो सकती है या हम इसके लिए length भी set कर सकते हैं| इसका एक उदाहरण नीचे दिया गया है:

 p{word-spacing:1em;}  

letter-spacing

यह word-sapcing के समान हि है लेकिन इसमें हम प्रत्येक individual letter के बीच spacing add किया जाता है| इसके भी  2 तरह के value हो सकते हैं, normal या कोई custom length.

example:

 p{letter-spacing:0.5em;}  

text-indent

इस प्रॉपर्टी के द्वारा आप किसी paragraph की first line का indent set कर सकते है इससे की उस first line में कुछ extra spaces add हो जाते हैं जिससे वह लाइन अलग दिखाई देता है|
इसकी value length या percentage में set कर सकते हैं|
उदाहरण:

 p{text-indent:3em;}  

text-shadow

आप अपने website के text के पीछे shadow add करके उसे और भी attractive बना सकते हैं ऐसा करने के लिए आपको text-shadow property use करना होगा| इसमें हमको 4 तरह की values एकसाथ डालने होते हैं जिसमे से पहली value horizontal shadow की size, दूसरी verticle shadow की size, तीसरी blur-radius और चौथी value shadow की color को define करता है | इसका एक सरल सा example नीचे दिया गया है|

 h4{text-shadow: 5px 4px yellow;}  

line-height

line-height से हम textके दो लाइनों के बीच के distance को control कर सकते हैं| इसकी वैल्यू हम normal, कोई number, lenght या percentage में दे सकते हैं| जहाँ normal default value होती है, वहीं अगर हम कोई number डालते हैं तो वह डिफ़ॉल्ट वैल्यू के साथ multiply हो जाती है| इसको समझने के लिए एक उदाहरण नीचे दिया गया है:

 p{line-height:2px}   

तो आज आपने इस article में CSS text properties in Hindi के बारे में जाना और उसके practical examples भी देखे, इससे जुड़े कोई भी सवाल आपके मन में हों तो हमे comment के माध्यम से जरूर बताएं| अगर आपको यह पोस्ट अच्छा लगा तो अपने दोस्तों के साथ इसे जरूर share करें|