Text in CSS

Text in CSS

Text का Color set करने के लिए color property use की जाती हैं। color को हम निम्‍न तरीकों से स्‍पेसिफॉय कर सकते हैं।

1. Color name से – जैसे “blue”
2. Hex value से – जैसे “#0000ff”
3. RGB value से – जैसे “rgb (0, 0, 255)”

For e.g. हमारे पास एक <p> element के अंदर कुछ text हैं।

<p>The sun rises in the east</p>

इस text का color blue set करने के लिए हम लिख सकते हैं।

<style>
p{
color: blue;
}
</style>

Text alignment :- किसी text का horizontal alignment set करने के लिए text-align property use करते हैं।

text-align की निम्‍नलिखित में से कोई एक value हो सकती हैं –

• center
• left
• right
• justify
• inherit

For eg. अगर <p> element के अंदर के text को हमे right alignment देना है तो हम लिखेंगे –

p{
text-align: right;
}

अगर left alignment देना हो तो text-align की value left देगें और center में align करने के लिए text-align की value center देंगे।

text-align: justify :- अगर हमें paragraph की हर line को एक जैसी width देनी हो तो हम text-align की value justify देंगे।

p{
text-align:justify;
}

यदि किसी element के text को उस element के parent element के text की तरह align करना हो तो text-align की value inherit देते हैं।

Text Decoration :- किसी text पर decoration सेट करने या हटाने के लिए text-decoration property का use करते हैं।

a{
text-decoration: none;
}

या अगर किसी heading के ऊपर line show करना हो तो हम लिखेंगे।

h1{
text-decoration: overline;
}

या अगर underline देनी हो तो

h1{
text-decoration: underline;
}

Text-transform:- किसी text में upper case (capital) letters या lowercase letters को specify करने के लिए text-transform property का use करते हैं। For e.g. हमारे पास एक <p> element हैं जिसमें text लिखा हैं –

<p>This is a test</p>

यदि हमें इस text के सारे letter uppercase में चाहिए तो हम text-transform की value देंगे ‘uppercase’

p{
text-transform: uppercase;
}

Result :- THIS IS A TEST

इसी तरह यदि हमें सारे letters lowercase में चाहिए हों तो,

p{
text-transform: lowercase ;
}

Result :- this is a test

यदि हमें text में हर एक word का पहला letter uppercase में चाहिए हो तो हम text-transform की value capitalize देंगे।

p{
text-transform: capitalize;
}

Result :- This Is A Test

यदि हम किसी element के text को उस element के parent element की text-transform value देना चाहते हैं तो हम text-transform की value inherit देंगे।

Letter Spacing :- किसी text में characters के बीच में Space को Specify करने के लिए letter spacing property का use करते हैं।

For e.g.

p{
letter-spacing: 5px;
}

Line Height:- किसी text में lines के बीच space को specify करने के लिए line-height property का use करते हैं।

For e.g.
<p>This is line one.</p>
<p>This is line two.</p>
<style>
p{
Line-height: 1.8;
}
</style>

Result :

This is line one.

 

This is line two.

Word-spacing :- किसी text में words के बीच में space को specify करने के लिए word-spacing property को use करते हैं।

For e.g.

<p>This is a test.</p>
p{
word-spacing: 10px;
}

Result :- This is a test.