CSS Text in Hindi: क्या आपको CSS का उपयोग करके text formatting करना है? अगर हाँ, तो आप सही जगह पर आए है इस tutorial (CSS Text in Hindi) में आपको Text formatting की पूरी जानकारी हिंदी में सीखने को मिलेगा।
जैसा कि आप जानते हैं HTML document को डिजाइन करने के लिए सीएसएस (कैस्केडिंग स्टाइल शीट) भाषा की आवश्यकता है। CSS में Text को format करने के लिए CSS में बहुत सारे गुण हैं।
Table of Contents
CSS Text in Hindi (Text formatting)
CSS टेक्स्ट CSS का एक मॉड्यूल है जो परिभाषित करता है कि टेक्स्ट हेरफेर कैसे करें, जैसे औचित्य, लाइन ब्रेकिंग और अलाइनमेंट, व्हाइट स्पेस हैंडलिंग और टेक्स्ट ट्रांसफॉर्मेशन।
Text को हेरफेर (manipulate) करने के लिए CSS property का उपयोग क्या जाता है। इसमें आप text का color सेट कर सकते है, इसी तरह text का direction, word-spacing, text-align या text को shadow आदि कर सकते है।
आप किसी HTML element के निम्नलिखित text prperties सेट कर सकते हैं –
- color property का उपयोग करके text का color सेट कर सकते है।
- Text का direction सेट करने के लिए आप direction property का उपयोग कर सकते है।
- letter-spacing प्रॉपर्टी का इस्तेमाल शब्द बनाने वाले अक्षरों (letters) के बीच space जोड़ने या घटाने के लिए किया जाता है।
- word-spacing प्रॉपर्टी का इस्तेमाल वाक्य (words) के शब्दों के बीच space जोड़ने या घटाने के लिए किया जाता है।
- text-indent प्रॉपर्टी का इस्तेमाल paragraph के टेक्स्ट को इंडेंट करने के लिए किया जाता है।
- text-align प्रॉपर्टी का उपयोग किसी दस्तावेज़ (document) के टेक्स्ट को संरेखित (align) करने के लिए किया जाता है।
- text-decoration प्रॉपर्टी का इस्तेमाल टेक्स्ट को underline, overline, और strikethrough करने के लिए किया जाता है।
- text-transform प्रॉपर्टी का उपयोग टेक्स्ट को capitalize करने या टेक्स्ट को uppercase या lowercase अक्षरों में बदलने के लिए किया जाता है।
- white-space प्रॉपर्टी का उपयोग टेक्स्ट के प्रवाह और formatting को नियंत्रित करने के लिए किया जाता है।
- text-shadow प्रॉपर्टी का इस्तेमाल टेक्स्ट के चारों ओर टेक्स्ट shadow सेट करने के लिए किया जाता है।
CSS Text Color Set करें
चलिए उदाहरण के साथ टेक्स्ट का color कैसे सेट किया जाता है समझें:
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: green;
}
h2 {
color: red;
}
</style>
</head>
<body>
<h2>Heading 2 ka color red hai </h2>
<p>Yeh body ka paragraph hai jo hamne iska color green set kiya hai.</p>
<p>Another paragraph.</p>
</body>
</html>
इसका output इस तरह browser display करेगा:
CSS colors की पूरी जानकारी के लिए “CSS Colors in Hindi” को पढ़े।
Text Direction सेट करें:
नीचे दिए गए उदाहरण दर्शाता है कि किसी text की दिशा कैसे निर्धारित की जाए। संभावित मान ltr (left to right) या rtl (right to left) हैं।
<html> <head> </head> <body> <h2 style = color:red; > Text Direction सेट करें: </h2> <p style = "direction:rtl;"> This text will be rendered from right to left </p> <p style = "direction:ltr;"> This text will be rendered from left to right </p> </body> </html>
Output:
Text Alignment set करें:
इस उदाहरण से सीखें text को कैसे alignment किया जाता है, संभावित मान left, center, right, औचित्य हैं।
<html> <head> </head> <body> <h2 style = color:red; > Text Alignment Using CSS: </h2> <p style = "text-align:left;"> This will be right aligned. </p> <p style = "text-align:center;"> This will be center aligned.</p> <p style = "text-align:right;"> This will be left aligned. </p> </body> </html>
Output:
Decorating the Text using CSS
निम्नलिखित उदाहरण दर्शाता है कि किसी text को कैसे सजाया जाता है। संभावित मान none, underline, overline, line-through, blink हैं।
<html>
<head>
</head>
<body>
<h2 style = color:red; > Decorating the Text using CSS:</h2>
<p style = "text-decoration:underline;">
This will be underlined
</p>
<p style = "text-decoration:line-through;">
This will be striked through.
</p>
<p style = "text-decoration:overline;">
This will have a over line.
</p>
<p style = "text-decoration:blink;">
This text will have blinking effect
</p>
</body>
</html>
Output:
Set the Text Cases using CSS:
चलिए उदाहरण के साथ सीखें टेक्स्ट के लिए केस cases (capitalize, uppercase, lowercase) सेट करें:
<head>
</head>
<body>
<h2 style = color:red; >Set the Text Cases using CSS:</h2>
<p style = "text-transform:capitalize;">
This will be capitalized
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>
Output:
CSS का उपयोग करके Text Shadow करें:
नीचे की उदाहरण दर्शाता है कि किसी text के चारों ओर shadow कैसे सेट करें। याद रखें यह कुछ ब्राउज़रों द्वारा समर्थित नहीं हो सकता है।
<html>
<head>
</head>
<body>
<h2 style = color:red; >CSS Text Shadow:</h2>
<p style = "text-shadow:2px 2px 10px yellow;">
If your browser supports the CSS text-shadow property,
this text will have a yellow shadow.
</p>
</body>
</html>
Output:
CSS Text Shadow:
If your browser supports the CSS text-shadow property, this text will have a yellow shadow.
निष्कर्ष
इस CSS Text in Hindi tutorial में अपने सिखा की text formating क्या है कहा और कैसे उपयोग कर सकते है।
अब आप text को color कर सकते है, text direction सेट कर सकते है, aligment कर सकते है, Text को decorate, cases कर सकते है, इतना ही नहीं आप CSS का उपयोग करके text को shadow effect look दे सकते है।
उम्मीद करता हूँ इस CSS text tutorial आपको text को formating करने में मदद करेगा।
इसी तरह HTML और CSS सीखने के लिए HTML tutorial और CSS Tutorial पेज पर जाएँ।
अगर आपका कोई सवाल है तो नीचे comment करके पूछ सकते है।
