CSS हमें देखने में आकर्षक कंटेंट बनाने के लिए टेक्स्ट को फॉर्मेट करने की अनुमति देता है। CSS का उपयोग करके टेक्स्ट को स्टाइल करने के लिए निम्नलिखित प्रॉपर्टीज का उपयोग किया जाता है।
color
यह प्रॉपर्टी टेक्स्ट का रंग बदलने में मदद करती है।
letter-spacing
यह प्रॉपर्टी कैरेक्टर्स के बीच स्पेसिंग सेट करने के लिए उपयोग की जाती है।
line-height
एक लाइन की ऊंचाई इस प्रॉपर्टी का उपयोग करके निर्दिष्ट की जाती है।
text-align
टेक्स्ट का क्षैतिज अलाइनमेंट text-align प्रॉपर्टी द्वारा नियंत्रित किया जाता है।
text-decoration
अंडरलाइन, स्ट्राइकथ्रू या ओवरलाइन करने और उसे स्टाइल करने के लिए text-decoration का उपयोग किया जाता है।
text-indent
किसी एलिमेंट की पहली लाइन का इंडेंटेशन text-indent प्रॉपर्टी द्वारा सेट किया जाता है।
text-shadow
टेक्स्ट के चारों ओर शैडो प्रदर्शित करने के लिए text-shadow प्रॉपर्टी का उपयोग किया जाता है।
text-transform
टेक्स्ट के केस को text-transform प्रॉपर्टी के साथ सेट किया जा सकता है।
word-spacing
शब्दों के बीच की जगह को इस प्रॉपर्टी से सेट किया जा सकता है।
सिंटैक्स
font-variant प्रॉपर्टी का सिंटैक्स निम्नानुसार है:
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>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
