CSS Text Tutorials in Hindi

आज इस आर्टिकल में हम आपको CSS Text Tutorials in Hindi – Part 11 के बारे में बताएँगे जिसको आप ऑनलाइन यहाँ से सिख सकते है.

CSS Text का इस्तेमाल text formatting के लिए किया जाता है. जैसे text का color बदलना, text का साइज़ बदलना, text की पोजीशन बदलना इत्यादि.

Text Color
Text Alignment
Text Decoration
Text Transformation
Text Indentation
Letter Spacing
Line Height
Text Direction
Word Spacing
Text Shadow

Text Color

किसी भी text के color को चेंज करने के लिए हम color property का इस्तेमाल करेंगे. इसकी value हम color name, hex code और RGB value दे कर define कर सकते है.

Example

body {
color: #ddd;
}

h1 {
color: green;
}

Text Alignment

इसका इस्तेमाल text की पोजीशन सेट करने के लिए किया जाता है. text-align का इस्तेमाल करके हम text को center, left और right align कर सकते है.

Example

h1 {
text-align: center;
}

h2 {
text-align: left;
}

h3 {
text-align: right;
}

इसके अलावा हम justify value का इस्तेमाल भी कर सकते है. इसके इस्तेमाल से हमारा text width के according stretch हो सकता है.

p{
text-align: justify;
}

Text Decoration

इसका इस्तेमाल किसी भी text से decoration हटाने और लगाने के लिए किया जाता है. जैसे underline और overline. इसका इस्तेमाल ज्यादातर link text से underline को हटाने के लिए किया जाता है जिसके लिए हम none value का इस्तेमाल करते है. इसके लिए हम text-decoration property का इस्तेमाल करते है.

Example

a {
text-decoration: none;
}

Text Transformation

इसका इस्तेमाल तब किया जाता है जब हमें कोई text uppercase, lowercase या capitalize form में चाहिए होता है. इसके लिए हम text-transform property का इस्तेमाल करते है.

Example

p.ex1 {
text-transform: uppercase;
}

p.ex2 {
text-transform: lowercase;
}

p.ex3 {
text-transform: capitalize;
}

Text Indentation

text-indent property का इस्तेमाल तब किया जाता है जब हमें किसी paragraph की पहली line को indentation करना हो.

Example

p {
text-indent: 50px;
}

Letter Spacing

इसका इस्तेमाल तब किया जाता है जब आपको अपने डॉक्यूमेंट में letter के बीच में space को specifiy करना हो. इसकी value नेगेटिव भी रखी जा सकती है जिससे आपके दिए गए letter के बीच में space को कम भी किया जा सकता है.

Example

p.ex1 {
letter-spacing: 3px;
}

p.ex2 {
letter-spacing: -3px;
}

Line Height

इसका इस्तेमाल तब किया जाता है जब आपको 2 text line के बीच में space को कम या ज्यादा करना हो.

Example

p.low{
line-height: 0.8;
}

p.high{
line-height: 1.8;
}

Text Direction

इसका इस्तेमाल text की डायरेक्शन को सेट करने के लिए किया जाता है.

Example

p {
direction: rtl;
}

Word Spacing

इसका इस्तेमाल 2 शब्दों के बीच में space बढ़ाने या कम करने के लिए किया जाता है. इसकी value नेगेटिव भी रखी जा सकती है.

Example

h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}

Text Shadow

इसका इस्तेमाल तब किया जाता है जब आपको किसी text की परछाई बने हो. इसमें आपको 3 value देनी होती है horizontal shadow, vertical shadow और shadow का color.