टेक्स्ट स्टाइलिंग का परिचय
CSS टेक्स्ट प्रॉपर्टीज आपको वेब पेज पर टेक्स्ट की उपस्थिति को पूरी तरह से नियंत्रित करने की अनुमति देती हैं। अच्छी टाइपोग्राफी वेबसाइट की पठनीयता और उपयोगकर्ता अनुभव को काफी बढ़ा देती है।
यह एक डेमो टेक्स्ट है जो विभिन्न CSS टेक्स्ट प्रॉपर्टीज को दर्शाता है।
फॉन्ट साइज और फैमिली
टेक्स्ट के आकार और स्टाइल को नियंत्रित करने के लिए:
फॉन्ट साइज
font-size: 16px;
font-size: 1rem;
font-size: 120%;
font-size: 1rem;
font-size: 120%;
फॉन्ट फैमिली
font-family: Arial, sans-serif;
font-family: "Times New Roman", serif;
font-family: "Nirmala UI", "Segoe UI";
font-family: "Times New Roman", serif;
font-family: "Nirmala UI", "Segoe UI";
टिप: हमेशा फॉन्ट स्टैक में एक से अधिक फॉन्ट शामिल करें ताकि अगर पहला फॉन्ट उपलब्ध न हो तो बैकअप फॉन्ट उपयोग हो सके।
टेक्स्ट कलर और अलाइनमेंट
टेक्स्ट के रंग और पंक्तिबद्ध करने के तरीके:
टेक्स्ट कलर
यह लाल रंग का टेक्स्ट है
color: #e74c3c;
color: rgb(231, 76, 60);
color: hsl(0, 70%, 50%);
color: rgb(231, 76, 60);
color: hsl(0, 70%, 50%);
टेक्स्ट अलाइनमेंट
केंद्र में संरेखित टेक्स्ट
text-align: left;
text-align: center;
text-align: right;
text-align: justify;
text-align: center;
text-align: right;
text-align: justify;
टेक्स्ट डेकोरेशन और ट्रांसफॉर्म
टेक्स्ट को सजाने और रूपांतरित करने के तरीके:
टेक्स्ट डेकोरेशन
अंडरलाइन टेक्स्ट
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
टेक्स्ट ट्रांसफॉर्म
uppercase text
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
text-transform: lowercase;
text-transform: capitalize;
फॉन्ट वेट और स्टाइल
टेक्स्ट को बोल्ड, इटैलिक या अन्य स्टाइल देना:
फॉन्ट वेट
बोल्ड टेक्स्ट
font-weight: normal;
font-weight: bold;
font-weight: 600;
font-weight: lighter;
font-weight: bold;
font-weight: 600;
font-weight: lighter;
फॉन्ट स्टाइल
इटैलिक टेक्स्ट
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: italic;
font-style: oblique;
टेक्स्ट शैडो और अन्य इफेक्ट्स
टेक्स्ट को और अधिक आकर्षक बनाने के लिए:
टेक्स्ट शैडो
छाया वाला टेक्स्ट
text-shadow: 2px 2px 4px gray;
text-shadow: 0 0 5px #fff;
text-shadow: 1px 1px 0 #000;
text-shadow: 0 0 5px #fff;
text-shadow: 1px 1px 0 #000;
लेटर स्पेसिंग
अक्षरों के बीच जगह
letter-spacing: normal;
letter-spacing: 2px;
letter-spacing: -1px;
letter-spacing: 2px;
letter-spacing: -1px;
निष्कर्ष
- font-family: टेक्स्ट का फॉन्ट सेट करता है
- font-size: टेक्स्ट का आकार निर्धारित करता है
- color: टेक्स्ट का रंग तय करता है
- text-align: टेक्स्ट को पंक्तिबद्ध करता है
- text-decoration: टेक्स्ट को सजाता है (जैसे underline)
- text-transform: अक्षरों को छोटा-बड़ा करता है
- font-weight/style: टेक्स्ट को bold/italic बनाता है
- text-shadow: टेक्स्ट में छाया जोड़ता है