CSS परिचय

CSS का पूरा नाम Cascading Style Sheets है। यह वह भाषा है जो तय करती है कि वेब पेज कैसा दिखेगा — रंग, font, जगह और बनावट। HTML पेज बनाता है; CSS उसे सजाता है।

Diagram — देखें, यह सब कैसे जुड़ता है

घर की तरह सोचें। HTML दीवारें, कमरे और दरवाज़े हैं — ढाँचा। CSS दीवारों का रंग, पर्दे और फर्नीचर है — सजावट। JavaScript बिजली और चलने-फिरने वाले हिस्से हैं — हरकत। सिर्फ HTML वाला पेज चलता तो है, पर सादा दिखता है: सफ़ेद पृष्ठभूमि पर काला text, सब कुछ एक ही कॉलम में। CSS जोड़िए, और वही पेज रंगीन, खुला-खुला और पढ़ने में अच्छा लगने लगता है।

ऐसे याद रखिए: HTML = ढाँचा, CSS = सजावट, JavaScript = हरकत। HTML कंकाल है, CSS सजावट है, JavaScript हरकत है। आप HTML पहले से जानते हैं। यह कोर्स आपको CSS सिखाता है — तीनों में से दूसरा।

CSS असल में क्या करता है

CSS से आप पेज पर दिखने वाली लगभग हर चीज़ बदल सकते हैं। Heading को नीला कर सकते हैं, paragraph को बड़ा कर सकते हैं, दो boxes के बीच जगह डाल सकते हैं, button को बीच में ला सकते हैं, या पूरे पेज को कॉलम में बाँट सकते हैं। आप rules लिखते हैं — छोटे निर्देश जो कहते हैं "पेज का यह हिस्सा ऐसा दिखना चाहिए"। Browser आपके नियम पढ़ता है और उसी हिसाब से पेज को रंग देता है।

सबसे अच्छी बात: एक CSS file पूरी वेबसाइट को सजा सकती है। एक जगह रंग बदलिए, और साइट का हर पेज एक साथ बदल जाता है। इसीलिए असली वेबसाइटें अपना CSS अलग file में रखती हैं, हर पेज पर दोहराती नहीं।

सिंटैक्स — आपका पहला CSS नियम

CSS नियम के दो हिस्से होते हैं: एक selector (पेज का कौन-सा हिस्सा) और एक declaration block (वह कैसा दिखना चाहिए)। पहले selector आता है, फिर घुँघराले कोष्ठक { }, और उनके अंदर एक या ज़्यादा declarations। हर declaration में एक property और एक value होती है, जो colon से अलग होती हैं और semicolon पर खत्म होती हैं।

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

इसे एक वाक्य की तरह पढ़िए: "हर h1 heading नीली होनी चाहिए, और उसका text 32 pixel ऊँचा होना चाहिए।" Selector h1 heading को चुनता है। Declaration color: blue; उसका रंग तय करता है। Declaration font-size: 32px; उसका आकार तय करता है।

CSS क्यों बना

वेब के शुरुआती दिनों में लोग पेजों को HTML attributes से सजाते थे — color, bgcolor, font — हर tag पर बार-बार लिखे जाते थे। यह गड़बड़ थी: एक रंग बदलने के लिए हर पेज बदलना पड़ता था। CSS इसी को ठीक करने के लिए बना। यह सारी सजावट HTML से निकालकर एक जगह ले आता है, ताकि HTML साफ़ रहे और design एक ही file में रहे।

आज हर professional वेबसाइट CSS इस्तेमाल करती है। अगर आप HTML और CSS साथ लिख सकते हैं, तो आप पूरी, अच्छी दिखने वाली वेबसाइट बना सकते हैं। JavaScript बाद में आता है, उन हिस्सों के लिए जो चलते हैं और प्रतिक्रिया देते हैं।

आम गलतियाँ

• यह सोचना कि CSS एक programming language है — यह styling की भाषा है। इसमें आप logic नहीं लिखते, सिर्फ दिखावट के नियम लिखते हैं।
• bgcolor या <font> जैसे HTML attributes से style करना — ये पुराने और outdated हैं। CSS उनकी जगह पूरी तरह ले लेता है।
• हर element पर वही style बार-बार लिखना — एक नियम लिखिए, वह सभी matching elements पर लागू हो जाएगा।
• यह उम्मीद करना कि CSS पेज के काम को बदल देगा — click करना, save करना और calculation करना JavaScript का काम है, CSS का नहीं।

याद रखें

• CSS = Cascading Style Sheets। यह तय करता है कि पेज कैसा दिखेगा।
• HTML = ढाँचा (skeleton), CSS = सजावट (decoration), JavaScript = हरकत (action)।
• CSS नियम = selector + declaration block: selector { property: value; }।
• एक CSS file पूरी वेबसाइट को सजा सकती है — एक बार बदलिए, और हर पेज बदल जाता है।

उदाहरण समझिए

• <style> — CSS <head> के अंदर <style> block में रहता है। <style> और </style> के बीच जो कुछ भी है, वह CSS नियम है, HTML नहीं।
• body { background-color: #fff8e1; } — पूरे पेज को हल्का क्रीम रंग देता है, जैसे चाय की दुकान की दीवार।
• h1 { color: #b45309; } — मुख्य heading को गर्म भूरा-नारंगी रंग देता है, ताकि वह body text से अलग दिखे।
• .card { background-color: white; border: 2px solid #f59e0b; } — मेनू card को सफ़ेद पृष्ठभूमि और नारंगी border मिलती है, जिससे वह पेज पर card जैसा दिखता है।
• .price { color: green; font-weight: bold; } — कीमतें हरी और bold हो जाती हैं, ताकि देखने वाले की नज़र सबसे पहले उन पर पड़े।