CSS Errors

CSS लिखते समय सबसे ज़्यादा दिक्कत तब आती है जब code काम नहीं करता, और हमें समझ नहीं आता कि गलती कहाँ हुई इस लेसन में आप सीखेंगे कि कौन-कौन सी common mistakes CSS में होती हैं और उन्हें कैसे सही किया जाता है।

CSS Errors क्या होते हैं?

CSS Errors वो गलतियाँ होती हैं जो browser को code समझने में मुश्किल देती हैं। कभी-कभी कोड चल तो जाता है, लेकिन output गलत आता है या कभी CSS बिल्कुल apply नहीं होती।

Common CSS Errors और उनके समाधान

नीचे कुछ सबसे आम CSS errors दिए गए हैं

Missing Semicolon (;)

हर CSS property के बाद semicolon लगाना जरूरी होता है।

❌ गलत Code:

h1 {
  color: blue
  font-size: 20px;
}

✅ सही Code:

h1 {
  color: blue;
  font-size: 20px;
}

अगर semicolon छूट गया तो अगली property काम नहीं करेगी।

2. गलत Property Name

कभी-कभी spelling mistake की वजह से CSS काम नहीं करती।

❌ गलत Code:

p {
  colr: red;
}

✅ सही Code:

p {
  color: red;
}

Browser colr नहीं समझेगा, क्योंकि valid property color है।

3. गलत Selector का इस्तेमाल

Selector गलत लिख देने पर CSS apply ही नहीं होगी।

❌ गलत Code:

h11 {
  color: blue;
}

✅ सही Code:

h1 {
  color: blue;
}

Curly Braces { } का Missing होना

हर CSS rule { } में लिखा जाता है। अगर कोई bracket miss हो गया तो पूरा कोड खराब हो सकता है।

❌ गलत Code:

div {
  color: red;

✅ सही Code:

div {
  color: red;
}

हर { का एक matching } होना चाहिए।

5. Quotes का गलत इस्तेमाल

CSS में string values को quotes में रखना चाहिए (खासकर fonts या URLs में)।

❌ गलत Code:

p {
  font-family: Times New Roman;
}

✅ सही Code:

p {
  font-family: "Times New Roman";
}

अगर font में space है तो double quotes ज़रूरी हैं।

Units भूल जाना

कई बार हम numeric values देते हैं लेकिन units लगाना भूल जाते हैं।

❌ गलत Code:

p {
  font-size: 20;
}

✅ सही Code:

p {
  font-size: 20px;
}

Browser को यह बताना जरूरी है कि 20 क्या है — px, em, या rem?

Invalid Property Values

कभी हम property सही लिख देते हैं लेकिन value गलत दे देते हैं।

❌ गलत Code:

div {
  color: center;
}

✅ सही Code:

div {
  text-align: center;
}

यहाँ property color के लिए “center” invalid value है।

Extra Characters या Spacing

कभी अनजाने में गलत symbols या space लग जाता है।

❌ गलत Code:

p {
  color: red;;
}

✅ सही Code:

p {
  color: red;
}

Double semicolon या random space से browser confuse हो सकता है।

Comment गलत तरीके से लिखना

CSS में comments केवल /* */ के बीच लिखे जाते हैं।

❌ गलत Code:

// यह comment है
h1 { color: blue; }

✅ सही Code:

/* यह comment है */
h1 { color: blue; }

// JavaScript में चलता है, CSS में नहीं।

File Link गलत लगाना

कभी-कभी हम CSS फाइल को गलत तरीके से HTML में लिंक कर देते हैं।

❌ गलत Code:

<link rel="stylesheet" href="style.csss">

✅ सही Code:

<link rel="stylesheet" href="style.css">

Bonus Tips — Error Detect करने के तरीके

Quick Recap

Final Thoughts