CSS का उपयोग करके किसी भी वेब पेज के Text को बहुत अच्छे से डिज़ाइन किया जा सकता है. वेब पेज को अच्छे से डिज़ाइन करने के लिए CSS बहुत सी Properties प्रदान करती है जिनका उपयोग करके आप वेब पेज को बहुत अच्छा बना सकते है.
CSS में आपको बहुत सी Properties मिल जाएगी है जिनका आप उपयोग कर सकते हो अपने वेब पेज इन सभी Properties के बारे में आप नीचे विस्तार से देख सकते है.
| Property | Description |
|---|---|
| Color | Color Property का उपयोग किसी Text का Color Set करने के लिए किया जाता है. |
| Direction | Direction Property का उपयोग किसी Text की Direction Set करने के लिए किया जाता है. |
| letter-spacing | letter-spacing Property का उपयोग किसी Text मे Letter-spacing Set करने के लिए किया जाता है. |
| word-spacing | word-spacing Property का उपयोग किसी Text मे Word-spacing Defined करने के लिए किया जाता है. |
| text-indent | Text-indent का उपयोग किसी Paragraph की First Line का Indent Set करने के लिए किया जाता है. |
| text-align | Text-align Property का उपयोग किसी Text का Web Page मे Alignment Set करने के लिए किया जाता है. |
| text-decoration | text-decoration Property का उपयोग किसी Text को Decorate करते हो जैसे की Text के नीचे Underline Define करने के लिए किया जाता है. |
| text-transform | text-transform Property का उपयोग किसी Text का Case Set करने के लिये करते है. |
| white-space | white-space Property का उपयोग Text के Flow और Formatting को Control करने के लिये किया जाता है. |
| text-shadow | इस Property का उपयोग Web Page मे Text की Shadow को प्रदशि॔त कर सकते है. |
<!DOCTYPE HTML>
<html>
<head>
<title>Text Color Example</title>
<style>
body {
color: red;
}
h1 {
color: #7fff00;
}
p.ex {
color: rgb(220,20,60);
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<p>My Name is Ammu</p>
<p class="ex">I Live in Telangana</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Direction Example</title>
<style>
div.x1 {
direction: rtl;
}
h1 {
direction: ltr;
color:red;
}
</style>
</head>
<body>
<div>Wellcome to My Website</div>
<h3>My Name is Ammu</h3>
<div class="x1">I Live in Telangana</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Letter Spacing Example</title>
<style>
h1 {
letter-spacing: 3px;
color:green;
}
h2 {
letter-spacing: -4px;
color:red;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Indent Example</title>
<style>
p {
text-indent: 60px;
color:green;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Alignment Example</title>
<style>
h1 {
text-align: center;
color:green;
}
h2 {
text-align: left;
color:red;
}
h3 {
text-align: right;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Decoration Example</title>
<style>
h1 {
text-decoration: overline;
color:green;
}
h2 {
text-decoration: line-through;
color:red;
}
h3 {
text-decoration: underline;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Text Shadow Example</title>
<style>
h1 {
text-shadow: 3px 3px #FF0000;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>