CSS पाठ्यपुस्तक - पाठ 1 - CSS शैलियाँ जोड़ना

10/10/2025, by Ivan

मैं यह नहीं समझाऊँगा कि CSS की आवश्यकता क्यों है। यदि आपने यह पाठ्यपुस्तक खोली है, तो इसका अर्थ है कि आप इसे सीखना चाहते हैं। मैं केवल इतना कहूँगा कि CSS की क्षमताएँ बहुत व्यापक हैं और यह किसी भी जटिलता के लेआउट को बनाने की अनुमति देती हैं। CSS का उपयोग करने का अर्थ है कि आपको कई पुराने HTML टैग गुणों — जैसे size, color, bgcolor, align आदि — का उपयोग बंद करना होगा, जो CSS के साथ "टकराते" हैं।

कम से कम तीन तरीके हैं जिनसे आप CSS को अपने HTML फ़ाइल से जोड़ सकते हैं। आइए सबसे सरल तरीके से शुरू करते हैं, फिर दूसरा और फिर सही तरीका देखें।

टैग के अंदर CSS

CSS को style गुण के माध्यम से जोड़ा जा सकता है:

<div style="width: 200px; height: 100px;">
  ब्लॉक
</div>

इस प्रकार हम 200x100 पिक्सेल का ब्लॉक बनाते हैं। आइए देखें कि CSS कैसे लिखी जाती है। पहले हम style="" गुण लिखते हैं, और फिर उद्धरणों के अंदर CSS स्टाइल्स।

style="गुण:मान;गुण:मान;गुण:मान"

हम पहले गुण का नाम (जैसे width, height आदि) लिखते हैं, फिर कॉलन (:) और फिर उसका मान। प्रत्येक गुण को सेमीकोलन (;) से अलग करते हैं।

अब दूसरे तरीके पर चलते हैं।

HTML दस्तावेज़ की शुरुआत में CSS

इसके लिए हम <style></style> टैग का उपयोग करते हैं, जिसके अंदर हम CSS कोड लिखते हैं:

<html>
 <head>
  <title>CSS पाठ्यपुस्तक</title>
  <style type="text/css">
  यहाँ हम CSS कोड लिखेंगे
  </style>
 </head>
 <body>
  <p>drupalbook.org के साथ CSS सीखें</p>
 </body>
</html>

हम <style> टैग को <head></head> के अंदर, <title> टैग के बाद लिखते हैं। आइए कुछ CSS कोड जोड़ें:

<html>
 <head>
  <title>CSS पाठ्यपुस्तक</title>
  <style type="text/css">
   body{
     background: #eeeeee; /* पृष्ठभूमि का रंग */     
     font-size: 14px;     /* फ़ॉन्ट का आकार */
   }
   p{
     color: #ff0000; /* टेक्स्ट का रंग */
   }
  </style>
 </head>
 <body>
  <p>drupalbook.org के साथ CSS सीखें</p>
  <p>दूसरी पंक्ति drupalbook.org के साथ CSS सीखें</p>
 </body>
</html>

अब देखें कि टैग्स के लिए CSS कैसे लिखी जाती है। यदि हम CSS में किसी टैग का नाम लिखते हैं, तो CSS के गुण उस टैग की सभी प्रतियों पर लागू होते हैं। उदाहरण के लिए, यदि हम p लिखते हैं, तो सभी पैराग्राफ पर यह शैली लागू होगी।

CSS कोड लिखते समय, पहले हम बताते हैं कि कौन-से टैग पर यह लागू होगा, फिर कर्ली ब्रैकेट {} के अंदर CSS गुण लिखते हैं। CSS गुणों की संरचना style="" जैसी होती है:

गुण:मान;गुण:मान;गुण:मान

गुण, कॉलन, मान, सेमीकोलन, और फिर से गुण, कॉलन, मान... अंतिम गुण के बाद सेमीकोलन वैकल्पिक है, लेकिन इसे लगाना बेहतर है।

हमने दो तरीकों से CSS जोड़ा है। अब तीसरा तरीका — सबसे उपयुक्त तरीका — देखते हैं।

CSS को एक अलग फ़ाइल में रखना

यह सबसे अच्छा तरीका है क्योंकि यह CSS को HTML कोड से पूरी तरह अलग करता है। निश्चित रूप से, कभी-कभी CSS को सीधे HTML में लिखने का मन करता है, लेकिन इस स्थिति में आपको ऐसा करने से बचना चाहिए और CSS को एक अलग फ़ाइल में रखना चाहिए। क्यों?

क्योंकि CSS की मुख्य अवधारणा है — पाठ और उसके रूप-रंग को अलग रखना। HTML केवल सामग्री (पाठ) के लिए है, जबकि CSS उस सामग्री की उपस्थिति (रंग, आकार, फ़ॉन्ट, बॉर्डर, स्पेसिंग आदि) के लिए है।

पहला कारण — HTML और CSS को अलग-अलग रखने से कोड अधिक पठनीय और व्यवस्थित होता है। दूसरा — जब HTML और CSS एक ही फ़ाइल में होते हैं, तो कोड भारी और जटिल हो जाता है। तीसरा — जब CSS एक अलग फ़ाइल में होती है, तो ब्राउज़र इसे कैश कर लेता है, इसलिए पृष्ठ तेजी से लोड होते हैं क्योंकि CSS केवल एक बार डाउनलोड होती है। अब आपको समझ में आ गया होगा कि मैं क्या कहना चाहता हूँ?

CSS को हमेशा अलग फ़ाइल में रखने का प्रयास करें! यही इस पूरे तर्क का सार है। अब चलिए एक अलग CSS फ़ाइल बनाते हैं। इसके लिए हम <link> टैग का उपयोग करेंगे:

<html>
 <head>
  <title>CSS पाठ्यपुस्तक</title>
  <link type="text/css" rel="stylesheet" media="all" href="styles.css" />
 </head>
 <body>
  <p>drupalbook.org के साथ CSS सीखें</p>
  <p>दूसरी पंक्ति drupalbook.org के साथ CSS सीखें</p>
 </body>
</html>

type="text/css" — यह बताता है कि यह एक CSS फ़ाइल है,

rel="stylesheet" — यह बताता है कि यह स्टाइलशीट है,

media="all" — यह स्टाइल सभी उपकरणों (डेस्कटॉप, मोबाइल आदि) पर लागू होगी,

href="styles.css" — CSS फ़ाइल का पथ। हमारे मामले में यह सापेक्ष पथ है।

अब जब आप जान गए हैं कि CSS फ़ाइल कैसे जोड़ी जाती है, तो उसी फ़ोल्डर में जहाँ आपकी HTML फ़ाइल है, एक styles.css नाम की फ़ाइल बनाएँ।

अब styles.css खोलें और इसमें निम्न CSS कोड डालें:

body{
  background: #eeeeee; /* पृष्ठभूमि का रंग */
  font-size: 14px;     /* फ़ॉन्ट का आकार */
}
p{
  color: #ff0000; /* टेक्स्ट का रंग */
}

इस फ़ाइल को सहेजें और अपने HTML फ़ाइल को ब्राउज़र में खोलें। अब CSS सही तरीके से आपकी HTML फ़ाइल से जुड़ गया है — एक अलग फ़ाइल के माध्यम से। अगले पाठ में हम विस्तार से सीखेंगे कि इस अलग CSS फ़ाइल में शैलियाँ कैसे लिखें।

एक्स्ट्रा ब्लॉक टाइप्स (EBT) - नया लेआउट बिल्डर अनुभव❗

❗एक्स्ट्रा पैराग्राफ टाइप्स (EPT) - नया पैराग्राफ्स अनुभव

CSS पाठ्यपुस्तक - पाठ 1 - CSS शैलियाँ जोड़ना

टैग के अंदर CSS

HTML दस्तावेज़ की शुरुआत में CSS

CSS को एक अलग फ़ाइल में रखना