CSS हमें आकर्षक सामग्री बनाने के लिए टेक्स्ट को प्रारूपित करने की अनुमति देता है। CSS का उपयोग करके टेक्स्ट को स्टाइल करने के लिए निम्नलिखित गुणों का उपयोग किया जाता है।
रंग
यह गुण हमें टेक्स्ट का रंग बदलने में मदद करता है।
लेटर-स्पेसिंग
इस गुण का उपयोग वर्णों के बीच रिक्ति सेट करने के लिए किया जाता है।
लाइन-ऊंचाई
इस गुण का उपयोग करके एक रेखा की ऊंचाई निर्दिष्ट की जाती है।
पाठ्य-संरेखण
टेक्स्ट के क्षैतिज संरेखण को टेक्स्ट-एलाइन प्रॉपर्टी द्वारा नियंत्रित किया जाता है।
पाठ्य-सजावट
अंडरलाइन, स्ट्राइकथ्रू या ओवरलाइन और इसे स्टाइल करने के लिए टेक्स्ट-डेकोरेशन का उपयोग किया जाता है।
टेक्स्ट-इंडेंट
किसी तत्व की पहली पंक्ति का इंडेंटेशन टेक्स्ट-पहचान संपत्ति द्वारा निर्धारित किया जाता है।
पाठ्य-छाया
पाठ के चारों ओर एक छाया प्रदर्शित करने के लिए, पाठ-छाया गुण का उपयोग किया जाता है।
पाठ्य-रूपांतरण
टेक्स्ट का केस टेक्स्ट-ट्रांसफॉर्म प्रॉपर्टी के साथ सेट किया जा सकता है।
शब्द रिक्ति
इस गुण से शब्दों के बीच का स्थान निर्धारित किया जा सकता है।
सिंटैक्स
फॉन्ट-वेरिएंट प्रॉपर्टी का सिंटैक्स इस प्रकार है -
Selector {
font-variant: /*value*/
} उदाहरण
निम्नलिखित उदाहरण CSS में टेक्स्ट फ़ॉर्मेटिंग को दर्शाते हैं।
<!DOCTYPE html>
<html>
<head>
<style>
h2::before {
content: "DEMO ";
text-align: center;
text-decoration: line-through;
color: orange;
}
article {
width: 600px;
text-align: justify;
text-shadow: -10px -5px lightgreen;
}
</style>
</head>
<body>
<h2>Example Heading</h2>
<article>This is demo text. Here, we are displaying different ways to format text.</article>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
display: flex;
float: left;
word-spacing: 30px;
box-shadow: inset 0 0 6px violet;
}
div::after {
content: " ";
border: 8px solid green;
}
div + div{
background-color: indianred;
width: 200px;
color: white;
text-align: justify;
}
</style>
</head>
<body>
<div>SAS stands for Statistical Analysis Software. It was created in the year 1960 by the SAS Institute.</div>
<div>SAS is a leader in business analytics. Through innovative analytics it caters to business intelligence and data management software and services.</div>
</body>
</html> आउटपुट
यह निम्न आउटपुट देता है-
