Text Style In Hindi:-

CSS Text Style:- दोस्तों जैसा की आप जानते है की मुख्य रूप से CSS का उपयोग किसी वेबसाइट को खूबसूरत बनाने के लिए किया जाता है | जब हम HTML में किसी tag जैसे की <p> या <h1> tag के अंदर कोई TEXT लिखते है तो उसे CSS के मदद से सुंदर और आकर्षक बना सकते है |

किसी Web Page के Text को सुन्दर बनाने के लिए CSS में कई तरह के Text Styling property उपलब्ध है |

  • Text Alignment
  • Text Decoration
  • Text Transformation
  • Text Indentation
  • Text Direction
  • Text Shadow
  1. Text Alignment :- Text Alignment का उपयोग Text की स्थिति को नियंत्रित करने के लिए किया जाता है | Text Alignment में तीन Value होते है | text-align: center; मतलब Text की location को Web Page के बीच में स्थित करना | text-align: left; मतलब Text की location को Web Page के बाएं में Fix करना | text-align: right; मतलब Text की location को Web Page के दाएं में Fix करना | नीचे के Example आप Text Alignment के तीनों गुणों का उपयोग देख सकते है |

Example 1 :- Example Of Text Alignment

<html>
<head>
<style>

.center {
    text-align: center;
}

.left {
    text-align: left;
}
.right {
    text-align: right;
}
</style>
</head>
<body>
<p class="center">Text aligned center.</p>
<p class="left">Text aligned left.</p>
<p class="right">Text aligned right.</p>
</body>
</html>

 

02.Text Decoration :- Text Decoration का उपयोग Text में decoration लगाने के लिए या Text से decoration हटाने के लिए किया जाता है |

Text Decoration में चार तरह के Value होते है | text-decoration: overline; का उपयोग किसी Text के ऊपर एक लाइन या रेखा खींचने के लिए होता है | text-decoration: line-through; का उपयोग किसी Text के बीच में (मतलब text को काट कर) एक लाइन या रेखा खींचने के लिए होता है | text-decoration: underline; का उपयोग किसी Text के नीचे एक लाइन या रेखा खींचने के लिए होता है | HTML के कुछ Tag ऐसे है जिनके उपयोग से Text में अपने आप कुछ decoration जुड़ जाता है जैसे की <a> Tag के उपयोग से Text के नीचे एक लाइन या रेखा खींच जाती है इस तरह के लाइन को हटाने के लिए text-decoration: none; का उपयोग किया जाता है |

नीचे के Example आप Text Decoration के चारों गुणों का उपयोग देख सकते है |

<html>
<head>
<style>

.decoration1 {
    text-decoration: overline;
}

.decoration2 {
    text-decoration: line-through;
}

.decoration3{
    text-decoration: underline;
}

.decoration4{
        text-decoration: none;
    }

</style>
</head>
<body>
<p class="decoration1">Text Decoration Overline.</p>
<p class="decoration2">Text Decoration Line Through.</p>
<p class="decoration3">Text Decoration Underline.</p>
 a tag gives underline text. <a href="http://www.web3tutorial.com">www.web3tutorial.com</a>
 Text decoration None. <a class="decoration4" href="http://www.web3tutorial.com">www.web3tutorial.com</a>
</body>
</html>

 

दोस्तों आज के पाठ में आपने Text Alignment और Text Decoration के बारे में पढ़ा | अगले पाठ में आप Text Transformation, Text Indentation , Text Direction और Text Shadow के बारे में विस्तार से पढ़ेंगे |

Next:- Text Style Part-2 Hindi :-