CSS परिचय

एक ऐसे घर की कल्पना कीजिए जिसकी दीवारें खड़ी हो चुकी हैं, कमरे बन चुके हैं, संरचना पूरी तरह मज़बूत है, लेकिन बिल्कुल खाली: कोई paint नहीं, कोई furniture नहीं, कोई personality नहीं। CSS के बिना एक HTML page बिल्कुल ऐसा ही दिखता है। HTML किसी page को structure और content देता है, और CSS वह चीज़ है जो उस structure को सजाती है, colors, fonts, spacing, और layout चुनकर एक page को असल में देखने में सुहावना बनाती है। CSS का मतलब है Cascading Style Sheets। cascading वाले हिस्से का मतलब यह है कि styles एक साथ कई जगहों से आ सकते हैं (browser की defaults से, किसी external stylesheet से, यहाँ तक कि किसी एक element पर inline भी) और CSS के पास यह तय करने के लिए rules का एक predictable set है कि conflict होने पर कौन-सा style जीतेगा। एक बार जब आप structure (HTML) को presentation (CSS) से अलग कर देते हैं, तो आप cookiescursor.com जैसी पूरी site को सिर्फ एक stylesheet edit करके restyle कर सकते हैं, हर page को अलग-अलग छुए बिना।

In this page:

CSS क्या है?
CSS क्यों मायने रखता है
Browsers CSS कैसे इस्तेमाल करते हैं
CSS और HTML का साथ में काम करना
CSS code कहाँ रह सकता है

CSS क्या है?

CSS वह language है जो बताती है कि HTML elements कैसे दिखने चाहिए: उनका color, size, spacing, fonts, और page पर position। HTML बताता है कि कोई चीज़ क्या है (एक heading, एक paragraph, एक button); CSS बताता है कि वह कैसा दिखना चाहिए।

Note: HTML को page का skeleton समझें और CSS को उसके ऊपर layer किया गया उसका पूरा appearance।

Warning: बिना किसी CSS के भी, एक page फिर भी काम करता है, वह बस browser की plain default styling इस्तेमाल करता है, जो आमतौर पर काफ़ी basic दिखती है।

उदाहरण: What Is CSS?

css

<style>
p {
  color: teal;
  font-size: 18px;
}
</style>
<p>HTML says this is a paragraph; CSS says how it looks.</p>

CSS क्यों मायने रखता है

CSS वह चीज़ है जो एक working webpage को एक सुहावने, पढ़ने में आसान, on-brand experience में बदल देती है। अच्छा CSS readability बेहतर करता है, visitor का ध्यान guide करता है, और site को trustworthy और professional महसूस कराता है।

Note: छोटे-छोटे CSS touches भी, जैसे consistent spacing और पढ़ने में आसान font size, इस बात पर बड़ा फ़र्क डालते हैं कि page कितना polished लगता है।

Warning: एक page functionally पूरा हो सकता है, लेकिन फिर भी visitors को टूटा हुआ या अविश्वसनीय लग सकता है अगर उसका CSS inconsistent है या मौजूद ही नहीं है।

उदाहरण: Why CSS Matters

css

<style>
.card {
  padding: 16px;
  font-size: 16px;
  color: #222;
  background: lightyellow;
  border: 1px solid #ddd;
}
</style>
<div class="card">Consistent spacing and readable text feel polished.</div>

Browsers CSS कैसे इस्तेमाल करते हैं

जब कोई browser किसी page को load करता है, तो वह पहले page का structure बनाने के लिए HTML पढ़ता है, फिर यह पता लगाने के लिए CSS पढ़ता है कि उस structure का हर हिस्सा screen पर कैसे draw होना चाहिए, इस process को अक्सर rendering कहा जाता है।

Note: Browsers पहले अपनी default styles लागू करते हैं, फिर आपकी CSS को उसके ऊपर layer करते हैं, इसलिए आप हमेशा किसी baseline appearance से शुरुआत करते हैं।

Warning: अलग-अलग browsers की default styles में थोड़ा फ़र्क हो सकता है, यही एक वजह है कि कोई भी CSS लिखने से पहले भी एक page अलग-अलग browsers में थोड़ा अलग दिख सकता है।

उदाहरण: How Browsers Use CSS

css

<style>
p {
  color: navy;
}
</style>
<p>The browser reads this HTML, then applies this CSS rule while rendering.</p>

CSS और HTML का साथ में काम करना

HTML और CSS दो अलग languages हैं जो एक team की तरह काम करते हैं: HTML elements उन targets की तरह काम करते हैं जिन्हें CSS selectors point करते हैं, और CSS rules बताते हैं कि उन targeted elements को कैसा दिखना चाहिए।

Note: अपने HTML को meaning और structure पर focused रखें, और सारे visual decisions CSS को करने दें, इससे दोनों languages को maintain करना आसान रहता है।

Warning: अगर आपका CSS selector page पर किसी भी HTML element से match नहीं करता, तो वह rule बस कुछ नहीं करता, बिना किसी error या warning के।

उदाहरण: CSS and HTML Working Together

css

<style>
.headline {
  color: darkred;
}
</style>
<h1 class="headline">CSS targets this element by its class</h1>

CSS code कहाँ रह सकता है

CSS को किसी एक element पर inline लिखा जा सकता है, page के head में किसी style tag के अंदर, या page से link की गई एक पूरी तरह अलग .css file में। हर तरीके की अपनी जगह है, और आगे के chapters इन्हें detail में cover करते हैं।

Note: किसी भी असली project के लिए, एक external stylesheet आमतौर पर सबसे अच्छा starting point है क्योंकि इसे site के हर page पर reuse किया जा सकता है।

Warning: कई elements पर बिखरे हुए सिर्फ inline styles पर निर्भर रहना, site बढ़ने के साथ जल्दी ही maintain करना मुश्किल बना देता है।

उदाहरण: Where CSS Code Can Live

css

<p style="color: red;">Inline CSS</p>
<style>
  p.internal { color: blue; }
</style>
<p class="internal">Internal CSS, inside a style tag</p>
<link rel="stylesheet" href="styles.css">

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Next Lesson → CSS Syntax