CSS Text

Website पर सबसे ज़्यादा चीज़ जो यूज़र देखता है — वो है Text. और अगर आपका टेक्स्ट readable, stylish और attractive दिखे, तो पूरा वेबपेज प्रोफेशनल लगने लगता है। तो चलिए सीखते हैं कि CSS में टेक्स्ट को कैसे कंट्रोल किया जाता है — आसान हिंदी + English mix में

CSS Text क्या करता है?

CSS में text से जुड़ी properties आपको control देती हैं कि:

Text का color क्या हो
Text कहाँ align हो (left, right, center)
Text underline, overline, capitalize आदि हो
Line के बीच कितना gap हो
Text shadow, spacing और transform कैसे हो

Text Color (टेक्स्ट का रंग)

p {
  color: blue;
}

यह पूरे paragraph का टेक्स्ट रंग blue कर देगा।

आप HEX, RGB, HSL या नाम (red, green आदि) सब यूज़ कर सकते हैं:

h1 {
  color: #ff6600;
}
p {
  color: rgb(120, 120, 120);
}

Text Alignment (टेक्स्ट को कहाँ रखें)

p {
  text-align: left;     /* default */
  text-align: center;   /* बीच में */
  text-align: right;    /* दाईं ओर */
  text-align: justify;  /* पूरी लाइन भर देता है */
}

Example:

<p style="text-align:center;">यह टेक्स्ट बीच में होगा</p>

Text Decoration (Underline, Overline, Line-through)

a {
  text-decoration: none;       /* underline हटाता है */
}
h1 {
  text-decoration: underline;  /* underline देता है */
}
p {
  text-decoration: line-through; /* टेक्स्ट काट देता है */
}

आप color और style भी जोड़ सकते हैं:

h1 {
  text-decoration: underline wavy red;
}

Text Transform (Uppercase / Lowercase / Capitalize)

p {
  text-transform: uppercase;   /* सभी अक्षर बड़े */
}
p {
  text-transform: lowercase;   /* सभी छोटे अक्षर */
}
p {
  text-transform: capitalize;  /* हर शब्द का पहला अक्षर बड़ा */
}

Useful जब headings या button text को uniform बनाना हो।

Text Indent (पहली लाइन की दूरी)

p {
  text-indent: 50px;
}

Paragraph की पहली लाइन थोड़ा अंदर से शुरू होगी (जैसे अखबार में दिखता है)।

Letter Spacing (अक्षरों के बीच Space)

p {
  letter-spacing: 2px;
}

Text को breathing space देने में helpful होता है।

Line Height (लाइन के बीच Space)

p {
  line-height: 1.8;
}

Paragraph को readable और साफ-सुथरा दिखाता है।

Word Spacing (शब्दों के बीच Space)

p {
  word-spacing: 10px;
}

Text Shadow (शैडो डालना)

h1 {
  text-shadow: 2px 2px 5px gray;
}

Syntax:

text-shadow: [x-offset] [y-offset] [blur-radius] [color];

Example:

h2 {
  color: white;
  text-shadow: 1px 1px 3px black;
}

यह टेक्स्ट को depth देता है।

Direction (टेक्स्ट दिशा)

p {
  direction: rtl; /* right to left */
}

Arabic या Urdu जैसी languages के लिए helpful होता है।

White-space Control

p {
  white-space: nowrap;  /* टेक्स्ट नई लाइन पर नहीं जाएगा */
}
p {
  white-space: pre;     /* spacing और line breaks को maintain करेगा */
}

Text Overflow (जब टेक्स्ट container से बाहर जाए)

div {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Output:- यह टेक्स्ट बहुत लंबा है...

Example: All Text Properties Together

<style>
.textbox {
  width: 400px;
  margin: 20px auto;
  color: #333;
  background: #f9f9f9;
  padding: 20px;
  text-align: justify;
  line-height: 1.8;
  text-indent: 50px;
  letter-spacing: 1px;
  word-spacing: 5px;
  border-left: 4px solid #0077cc;
}
.textbox h1 {
  text-align: center;
  text-transform: uppercase;
  text-decoration: underline wavy #0077cc;
  text-shadow: 1px 1px 3px #aaa;
}
</style>

<div class="textbox">
  <h1>Welcome to CSS Text Lesson</h1>
  <p>
    यह टेक्स्ट आपको बताएगा कि कैसे हम टेक्स्ट को सुंदर और readable बना सकते हैं।
  </p>
</div>

Quick Recap

Property (प्रॉपर्टी)	काम (Function)
color	टेक्स्ट का रंग
text-align	टेक्स्ट की position (स्थिति)
text-decoration	underline / line-through (रेखांकन / बीच से काटना)
text-transform	uppercase / lowercase (बड़े अक्षर / छोटे अक्षर)
line-height	लाइनों के बीच gap (दूरी)
letter-spacing	अक्षरों के बीच space (जगह)
word-spacing	शब्दों के बीच space (जगह)
text-shadow	शैडो डालना (छाया जोड़ना)
text-overflow	टेक्स्ट कटने पर “...” दिखाना

Common Mistakes

❌ बहुत ज़्यादा letter-spacing देने से text टूट जाता है
✅ हमेशा readability के हिसाब से use करें
❌ text-decoration: none; लगाकर लिंक को बिल्कुल plain कर देना
✅ hover state में कुछ visual style रखें (जैसे color change)

Pro Tips

Readability के लिए line-height कम से कम 1.5 रखें
Paragraph text के लिए dark grey (#333) color perfect रहता है
text-transform से headings को uniform रखें
text-shadow का subtle use करें — ज़्यादा glow avoid करें

Final Thoughts

CSS Text properties आपकी website को readable, stylish और professional बनाती हैं। थोड़ा spacing और alignment सही हो जाए, तो पूरा layout classy दिखता है