📘 Lesson · Lesson 09

Text Styling

text-align — horizontal positioning

h1 { text-align: center; }
p  { text-align: justify; }

Value	Effect
left	Default for English — aligns to the left edge
center	Centered — great for headings, hero text
right	Aligns to the right edge
justify	Stretches lines to both edges (like a newspaper)

Common confusion: text-align aligns TEXT (and other inline content) inside its box — it does NOT center the box itself. To center a whole box on the page you need margin auto or flexbox (later chapters). So text-align: center centers the words inside an element, not the element on the page. Keep this distinction clear and you'll avoid a classic beginner frustration.

text-decoration — lines on text

a { text-decoration: none; }              /* remove the link underline */
.sale { text-decoration: line-through; }  /* strikethrough for old price */
.new { text-decoration: underline; }      /* add an underline */

₹999 ₹499 ← line-through on the old price

Controls lines on text: underline, overline, line-through, or none. The most common real use is text-decoration: none to REMOVE the default underline from links — then you style them your own way (colour, hover effects). The second most common is line-through for old/crossed-out prices. A quick, everyday property.

text-transform — change the case

.btn { text-transform: uppercase; }       /* SAVE */
.name { text-transform: capitalize; }     /* Aman Kumar */
.code { text-transform: lowercase; }       /* abc123 */

The clever part: text-transform changes how text DISPLAYS without changing the actual text in your HTML. Write "save" in your HTML, and uppercase shows "SAVE" on screen — but the real text stays lowercase (better for accessibility and if you change the design later). This is perfect for buttons and headings where you want consistent casing regardless of what was typed. capitalize makes The First Letter Of Each Word capital — handy for names.

Spacing: letter, word, and beyond

h1 { letter-spacing: 2px; }    /* space BETWEEN letters - S P A C E D */
p  { word-spacing: 5px; }      /* space between words */
h2 { text-indent: 30px; }      /* indent the first line */

letter-spacing adds space between individual letters — a small positive value (1-2px) on uppercase headings looks elegant and premium; too much hurts readability. word-spacing adjusts gaps between words. text-indent indents the first line of a paragraph (book-style). Use these sparingly — a little letter-spacing on headings is a pro touch, but overdoing spacing makes text hard to read.

line-height — the readability secret

p {
    line-height: 1.6;    /* 1.6 × the font size of space per line */
}

Cramped (line-height: 1): Comfortable (line-height: 1.6): Text sits tightly Text has room to with lines almost breathe between each touching each other line, much easier to read

This one property dramatically improves readability — and beginners always forget it. line-height is the vertical space each line of text occupies. The default is often too tight for comfortable reading. A value of 1.5 to 1.7 (unitless — a multiplier of the font size) gives text room to breathe and is the single easiest way to make body text look professional. Notice this very tutorial uses generous line-height so paragraphs are easy on the eyes. Set line-height: 1.6 on your body text and everything instantly reads better.

Exam Corner

Q: Does text-align: center center the box? No — it centers text/inline content INSIDE the box, not the box itself.

Q: How do you remove a link's underline? text-decoration: none;

Q: What does text-transform: uppercase do to the HTML text? Displays it uppercase without changing the actual text in the HTML.

Q: What's a good line-height for body text? Around 1.5–1.7 (unitless), for comfortable readability.

Q: Which property spaces individual letters? letter-spacing.

text-align — horizontal positioning

h1 { text-align: center; }
p  { text-align: justify; }

Value	असर
left	English का default — बाएं किनारे align
center	Centered — headings, hero text के लिए बढ़िया
right	दाएं किनारे align
justify	Lines दोनों किनारों तक खींचता है (अखबार जैसा)

आम confusion: text-align अपने box के अंदर TEXT (और अन्य inline content) align करता है — यह box को खुद center NAHI करता. पूरे box को page पर center करने को margin auto या flexbox चाहिए (आगे के chapters). तो text-align: center element के अंदर के शब्द center करता है, page पर element नहीं. यह फर्क साफ रखिए और classic beginner परेशानी से बचिए.

text-decoration — text पर lines

a { text-decoration: none; }              /* link underline hatao */
.sale { text-decoration: line-through; }  /* purane price par strikethrough */
.new { text-decoration: underline; }      /* underline jodo */

₹999 ₹499 ← purane price par line-through

Text पर lines control करता है: underline, overline, line-through, या none. सबसे common असली इस्तेमाल text-decoration: none है links से default underline HATANE को — फिर उन्हें अपने तरीके से style करते हैं (colour, hover effects). दूसरा common line-through पुराने/काटे गए prices के लिए. तेज़, रोज़ की property.

text-transform — case बदलना

.btn { text-transform: uppercase; }       /* SAVE */
.name { text-transform: capitalize; }     /* Aman Kumar */
.code { text-transform: lowercase; }       /* abc123 */

चतुर बात: text-transform बदलता है text कैसे DIKHTA है, आपके HTML का असली text बदले बिना. HTML में "save" लिखिए, और uppercase screen पर "SAVE" दिखाता है — पर असली text lowercase ही रहता है (accessibility के लिए बेहतर और अगर बाद में design बदलें). यह buttons और headings के लिए perfect है जहां आप चाहते हैं consistent casing चाहे जो भी typed हो. capitalize हर शब्द का पहला अक्षर बड़ा करता है — names के लिए काम का.

Spacing: letter, word, और आगे

h1 { letter-spacing: 2px; }    /* letters ke BEECH space - S P A C E D */
p  { word-spacing: 5px; }      /* words ke beech space */
h2 { text-indent: 30px; }      /* pehli line indent */

letter-spacing अलग-अलग letters के बीच space जोड़ता है — uppercase headings पर छोटी positive value (1-2px) elegant और premium दिखती है; ज़्यादा readability नुकसान करती है. word-spacing शब्दों के बीच gaps adjust करता है. text-indent paragraph की पहली line indent करता है (किताब-style). इन्हें कम इस्तेमाल कीजिए — headings पर थोड़ा letter-spacing pro touch है, पर ज़्यादा spacing text पढ़ना मुश्किल कर देती है.

line-height — readability का राज़

p {
    line-height: 1.6;    /* font size ka 1.6 × space per line */
}

Cramped (line-height: 1): Comfortable (line-height: 1.6): Text tightly baithta hai Text ko har line ke beech lines lagbhag ek doosre saans lene ki jagah milti ko chhoote hue hai, padhne me bahut aasan

यह एक property readability नाटकीय रूप से सुधारती है — और beginners हमेशा भूल जाते हैं. line-height text की हर line जितनी vertical जगह लेती है. Default अक्सर आरामदायक पढ़ने के लिए बहुत तंग होता है. 1.5 से 1.7 value (unitless — font size का multiplier) text को सांस लेने की जगह देती है और body text को professional दिखाने का सबसे आसान तरीका है. ध्यान दीजिए यही tutorial उदार line-height use करता है ताकि paragraphs आंखों पर आसान हों. अपने body text पर line-height: 1.6 set कीजिए और सब कुछ तुरंत बेहतर पढ़ता है.

Exam Corner

Q: क्या text-align: center box को center करता है? नहीं — box के ANDAR text/inline content center करता है, box को नहीं.

Q: Link का underline कैसे हटाते हैं? text-decoration: none;

Q: text-transform: uppercase HTML text का क्या करता है? HTML का असली text बदले बिना uppercase दिखाता है.

Q: Body text के लिए अच्छी line-height? लगभग 1.5–1.7 (unitless), आरामदायक readability के लिए.

Q: कौन-सी property individual letters को space करती है? letter-spacing.

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.