किसी पेज से CSS जोड़ना

जानें कि CSS क्या है, इसे किसी HTML पेज से कैसे जोड़ते हैं, और अपना पहला नियम कैसे लिखते हैं।

8 मिनट · 3 प्रश्न

HTML किसी वेब पेज की सामग्री का वर्णन करता है: शीर्षक, अनुच्छेद, चित्र। CSS (Cascading Style Sheets का संक्षिप्त रूप) उसकी दिखावट का वर्णन करता है: रंग, आकार, अंतराल। एक घर की कल्पना करें: HTML दीवारें और कमरे हैं; CSS पेंट, फर्नीचर और सजावट है। CSS के बिना, हर वेब पेज एक जैसा दिखता: सफेद पृष्ठभूमि पर काला पाठ।

एक CSS नियम तीन भागों से बना होता है। सबसे पहले आता है एक selector: यह बताता है कि पेज पर कौन-से तत्व प्रभावित होते हैं (उदाहरण के लिए, सभी अनुच्छेद)। फिर, घुंघराले कोष्ठकों { } के बीच, एक या अधिक declarations आती हैं। प्रत्येक declaration एक property (आप क्या बदलना चाहते हैं, जैसे रंग) को एक value (आपका चुनाव, जैसे लाल) के साथ जोड़ती है, जो एक कोलन : से अलग होते हैं और एक अर्धविराम ; से समाप्त होते हैं।

CSS

p {
  color: red;
  font-size: 18px;
}

एक CSS नियम: सभी अनुच्छेद लाल रंग में, 18 पिक्सेल आकार के।

आइए इस नियम को शब्द-दर-शब्द पढ़ें। p selector है: यह पेज पर हर <p> तत्व को, यानी अनुच्छेदों को, निशाना बनाता है। color एक property है जो पाठ का रंग तय करती है, और red उसका मान है। font-size पाठ का आकार तय करती है, यहाँ 18px (18 पिक्सेल, स्क्रीन मापने के लिए इस्तेमाल होने वाली इकाई)। इस CSS को किसी HTML पेज से जोड़ने के तीन तरीके हैं। अनुशंसित तरीका है बाहरी फाइल: CSS अपनी खुद की फाइल में रहती है, उदाहरण के लिए styles.css, जिसे आप <head> के अंदर रखे गए एक <link> टैग से HTML में जोड़ते हैं।

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>This text will be red.</p>
  </body>
</html>

दूसरा तरीका: आंतरिक CSS। आप नियमों को सीधे HTML में, <head> में रखे गए एक <style> टैग के अंदर लिखते हैं। यह किसी त्वरित परीक्षण के लिए सुविधाजनक है, लेकिन ये शैलियाँ केवल उसी एक पेज पर लागू होती हैं। तीसरा तरीका: इनलाइन CSS। आप declarations को सीधे किसी टैग पर, एक style विशेषता में लिखते हैं। ध्यान दें कि यहाँ कोई selector और कोई घुंघराले कोष्ठक नहीं हैं, क्योंकि शैली केवल उसी टैग पर लागू होती है।

HTML

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>
  <p style="color: blue;">I am blue.</p>
  <p>I am red.</p>
</body>

हमेशा बाहरी फाइल को प्राथमिकता दें: एक ही styles.css फाइल दर्जनों पेजों को शैली दे सकती है। उसमें एक रंग बदलें, और हर पेज एक साथ अपडेट हो जाता है।

प्रत्येक declaration के अंत में अर्धविराम ; कभी न भूलें। इसके बिना, ब्राउज़र बिना कोई त्रुटि दिखाए अगली declaration को छोड़ सकता है।

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

नियम p { color: red; } में, color क्या है?
- selector
- property
- value
- अर्धविराम
कौन-सा टैग किसी बाहरी CSS फाइल को किसी HTML पेज से जोड़ता है?
- <style>
- <css>
- <link rel="stylesheet" href="styles.css">
बाहरी CSS फाइल अनुशंसित तरीका क्यों है?
- यह अकेला ऐसा तरीका है जो मोबाइल पर काम करता है
- एक ही फाइल एक साथ कई पेजों को शैली दे सकती है
- यह अपने आप साइट को कोड करने में तेज़ बना देता है