HTML Styles

HTML Styles क्या हैं?

HTML Styles का उपयोग वेब पेज पर प्रस्तुत किए गए कंटेंट की उपस्थिति (appearance) को नियंत्रित करने के लिए किया जाता है। यह आपके HTML Elements को रंग, आकार, फॉन्ट, दूरी, और अन्य दृश्य गुण प्रदान करता है। HTML में स्टाइलिंग को आमतौर पर CSS (Cascading Style Sheets) के माध्यम से लागू किया जाता है।

HTML और CSS मिलकर एक वेबसाइट के दृश्य रूप को नियंत्रित करते हैं। जहां HTML कंटेंट की संरचना बनाता है, वहीं CSS उसकी स्टाइलिंग को परिभाषित करता है।

HTML Styles का उपयोग कैसे करें?

HTML Styles को तीन प्रमुख तरीकों से लागू किया जा सकता है:

1. Inline Styles

इंलाइन स्टाइल्स HTML टैग्स के अंदर style एट्रिब्यूट का उपयोग करके लागू किए जाते हैं। यह सबसे साधारण तरीका है, लेकिन इसकी सीमाएँ होती हैं, जैसे कि यह सभी टैग्स में अलग-अलग लागू होता है।

उदाहरण:

<p style="color: blue; font-size: 16px;">यह नीले रंग का टेक्स्ट है।</p>

2. Internal Styles

इंटर्नल स्टाइल्स को HTML दस्तावेज़ के <head> सेक्शन में <style> टैग का उपयोग करके लिखा जाता है। यह तरीका तब उपयोगी होता है जब आप पूरे पेज के लिए स्टाइल्स को एक जगह पर रखना चाहते हैं।

उदाहरण:

<head>
  <style>
    body {
      background-color: lightblue;
    }
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>यह एक हरा रंग का पैराग्राफ़ है।</p>
</body>

3. External Styles

एग्ज़टर्नल स्टाइल्स CSS फाइल का उपयोग करके लागू किए जाते हैं। यह तरीका सबसे अधिक उपयोग किया जाता है, क्योंकि इसमें वेबसाइट के सभी पेजों के लिए एक ही CSS फाइल का उपयोग किया जा सकता है।

उदाहरण:

एक CSS फाइल (styles.css) में स्टाइल्स:

body {
  background-color: lightgreen;
}
h1 {
  color: purple;
}

HTML फाइल में CSS को लिंक करें:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

HTML Styles के प्रमुख गुण (Properties)

CSS में कई गुण होते हैं जिनका उपयोग हम HTML Elements की स्टाइलिंग के लिए करते हैं। नीचे कुछ प्रमुख गुणों का विवरण दिया गया है:

1. Color

HTML में रंग को color प्रॉपर्टी के माध्यम से सेट किया जाता है। आप इसे टेक्स्ट, बैकग्राउंड, बॉर्डर आदि के लिए इस्तेमाल कर सकते हैं।

उदाहरण:

<p style="color: red;">यह एक लाल रंग का पैराग्राफ़ है।</p>

2. Background

HTML Elements के बैकग्राउंड (पृष्ठभूमि) को background-color प्रॉपर्टी से बदला जा सकता है। आप इमेज, रंग या अन्य पृष्ठभूमि सेट कर सकते हैं।

उदाहरण:

<p style="background-color: yellow;">यह एक पीला बैकग्राउंड वाला पैराग्राफ़ है।</p>

3. Font

HTML में किसी टेक्स्ट का फॉन्ट आकार, प्रकार, और शैली नियंत्रित करने के लिए font-family, font-size, और font-style जैसे गुणों का उपयोग किया जाता है।

उदाहरण:

<p style="font-family: Arial; font-size: 20px; font-style: italic;">यह इटैलिक और 20px आकार का टेक्स्ट है।</p>

4. Text Alignment

HTML में टेक्स्ट को केंद्रित (center), दाएं (right), या बाएं (left) संरेखित करने के लिए text-align गुण का उपयोग किया जाता है।

उदाहरण:

<p style="text-align: center;">यह केंद्र में संरेखित टेक्स्ट है।</p>

5. Margin और Padding

HTML Elements के चारों ओर स्थान (space) जोड़ने के लिए margin और padding प्रॉपर्टीज का उपयोग किया जाता है।

Margin: एलिमेंट के बाहर के अंतर को नियंत्रित करता है।
Padding: एलिमेंट के अंदर के अंतर को नियंत्रित करता है।

उदाहरण:

<p style="margin: 20px; padding: 10px;">यह पैराग्राफ़ के चारों ओर जगह है।</p>

6. Border

HTML Elements के चारों ओर बॉर्डर जोड़ने के लिए border गुण का उपयोग किया जाता है।

उदाहरण:

<p style="border: 2px solid black;">यह बॉर्डर वाला पैराग्राफ़ है।</p>

HTML Styles और Responsive Design

जब आप वेब पेजों के लिए स्टाइलिंग करते हैं, तो यह सुनिश्चित करना आवश्यक होता है कि वे विभिन्न डिवाइसों (जैसे स्मार्टफोन, टैबलेट, डेस्कटॉप) पर सही तरीके से दिखें। इसके लिए CSS Media Queries का उपयोग किया जाता है।

उदाहरण:

<head>
  <style>
    body {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      body {
        font-size: 12px;
      }
    }
  </style>
</head>

यह कोड यह सुनिश्चित करता है कि यदि स्क्रीन का आकार 600px से कम है, तो फॉन्ट आकार 12px हो जाएगा।

निष्कर्ष

HTML Styles का उपयोग करके आप वेब पेज की उपस्थिति को बेहतर बना सकते हैं और उसे उपयोगकर्ता के लिए अधिक आकर्षक बना सकते हैं। इस अध्याय में आपने HTML Styles के विभिन्न तरीकों, गुणों, और प्रैक्टिस को जाना। इस पर आधारित स्टाइलिंग के उपयोग से आप अपने वेब पेज को अधिक पेशेवर और आकर्षक बना सकते हैं। अगले अध्याय में हम HTML Images के बारे में जानेंगे।