HTML & CSS

HTML और CSS क्या हैं?

HTML (HyperText Markup Language) का उपयोग वेब पेज की संरचना (structure) बनाने के लिए किया जाता है, जबकि CSS (Cascading Style Sheets) का उपयोग वेब पेज को स्टाइल देने और डिज़ाइन करने के लिए किया जाता है। CSS आपको वेब पेज के विभिन्न तत्वों जैसे टेक्स्ट, बैकग्राउंड, बॉर्डर, लेआउट आदि को अधिक आकर्षक और इंटरएक्टिव बनाने में मदद करता है।

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

HTML के साथ CSS जोड़ने के तरीके

HTML के साथ CSS को जोड़ने के तीन तरीके हैं:

Inline CSS
Internal CSS
External CSS

1. Inline CSS

Inline CSS का उपयोग किसी विशेष HTML तत्व को स्टाइल देने के लिए किया जाता है। इसमें CSS को सीधे HTML टैग के style attribute के अंदर लिखा जाता है।

उदाहरण:

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: blue; text-align: center;">यह हेडिंग है</h1>
  <p style="color: green; font-size: 18px;">यह एक पैराग्राफ है।</p>
</body>
</html>

विशेषता:

केवल एक तत्व पर स्टाइल लागू होता है।
छोटे और सरल बदलावों के लिए उपयोगी।

2. Internal CSS

Internal CSS का उपयोग पूरे वेब पेज पर स्टाइल लागू करने के लिए किया जाता है। इसमें CSS को <style> टैग के अंदर लिखा जाता है, जो <head> सेक्शन में होता है।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>यह हेडिंग है</h1>
  <p>यह एक पैराग्राफ है।</p>
</body>
</html>

विशेषता:

एक ही पेज पर कई तत्वों को स्टाइल करने के लिए उपयोगी।

3. External CSS

External CSS का उपयोग बड़े प्रोजेक्ट्स में किया जाता है, जहां स्टाइल को एक अलग फ़ाइल में रखा जाता है। इस फ़ाइल में .css एक्सटेंशन होता है।

उदाहरण:

HTML फ़ाइल:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>यह हेडिंग है</h1>
  <p>यह एक पैराग्राफ है।</p>
</body>
</html>

CSS फ़ाइल (styles.css):

body {
  background-color: lightyellow;
}
h1 {
  color: darkred;
  text-align: center;
}
p {
  color: black;
  font-size: 16px;
}

विशेषता:

पूरे प्रोजेक्ट में स्टाइल को नियंत्रित करना आसान होता है।
कोड को व्यवस्थित और पुन: उपयोग करने योग्य बनाता है।

CSS Syntax

CSS के नियम (rule) में दो मुख्य भाग होते हैं:

Selector: यह वह तत्व होता है जिसे आप स्टाइल देना चाहते हैं।
Declaration: इसमें स्टाइल के नियम लिखे जाते हैं।

Syntax:

selector {
  property: value;
}

उदाहरण:

h1 {
  color: blue; /* टेक्स्ट का रंग */
  font-size: 24px; /* फॉन्ट का आकार */
}

CSS के साथ HTML का उपयोग करने के फायदे

डिज़ाइन को बेहतर बनाना:
CSS वेब पेज को आकर्षक और उपयोगकर्ता-अनुकूल बनाता है।
कोड को व्यवस्थित रखना:
HTML और CSS को अलग-अलग रखने से कोड अधिक साफ और प्रबंधनीय होता है।
Responsive Design:
CSS का उपयोग वेब पेज को विभिन्न डिवाइस (जैसे मोबाइल, टैबलेट, लैपटॉप) पर सही ढंग से दिखाने के लिए किया जा सकता है।
पुन: उपयोग:
External CSS का उपयोग करके, एक ही स्टाइल को कई HTML पेज पर लागू किया जा सकता है।

CSS का उपयोग किन चीज़ों को स्टाइल देने के लिए होता है?

1. Text Styles:

टेक्स्ट का रंग, आकार, फॉन्ट, और अलाइनमेंट बदलना।

उदाहरण:

p {
  color: darkgreen;
  font-size: 18px;
  text-align: justify;
}

2. Background Styles:

बैकग्राउंड का रंग या इमेज सेट करना।

उदाहरण:

body {
  background-color: lightblue;
}

3. Borders:

बॉर्डर का रंग, मोटाई और स्टाइल।

उदाहरण:

div {
  border: 2px solid black;
}

4. Margins और Padding:

तत्वों के चारों ओर की खाली जगह को नियंत्रित करना।

उदाहरण:

h1 {
  margin: 20px;
  padding: 10px;
}

5. Layouts:

वेब पेज का लेआउट बनाना (जैसे Flexbox और Grid)।

उदाहरण:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS Frameworks

CSS Frameworks का उपयोग करके स्टाइलिंग को आसान और तेज बनाया जा सकता है। लोकप्रिय CSS Frameworks में शामिल हैं:

Bootstrap
Tailwind CSS
Foundation

CSS कोड को ऑर्गनाइज़ करने के सुझाव

Class और ID का सही उपयोग करें।
स्टाइल को ज़रूरत के अनुसार ही लिखें।
External CSS का उपयोग करें।
CSS को ग्रुप करें, जैसे टेक्स्ट, लेआउट, और बैकग्राउंड।

निष्कर्ष

HTML और CSS एक साथ मिलकर एक वेब पेज को प्रभावी और आकर्षक बनाते हैं। CSS के तीन तरीकों (Inline, Internal, और External) का उपयोग करके आप अपनी ज़रूरत के अनुसार स्टाइलिंग लागू कर सकते हैं। अगले अध्याय में, हम HTML Links के बारे में विस्तार से सीखेंगे।