HTML Styles - CSS

CSS का उपयोग करके HTML को फ़ॉर्मेट करें

CSS क्या हैं?

CSS का मतलब कैस्केडिंग स्टाइल शीट्स है।

सीएसएस बहुत सारा काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।

🎨 CSS = Styles and Colors

सीएसएस का उपयोग टेक्स्ट में हेरफेर करने, रंगों, बक्सों और टोपोलॉजी को नियंत्रित करने के लिए किया जाता है।

CSS व्याख्या

कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग वेब पेज के लेआउट को डिजाइन करने के लिए किया जाता है।

सीएसएस के साथ, आप रंग, फ़ॉन्ट, टेक्स्ट आकार, तत्वों के बीच की दूरी, तत्वों को कैसे स्थित किया जाता है, क्या पृष्ठभूमि छवियों या पृष्ठभूमि रंगों का उपयोग किया जाना चाहिए, विभिन्न उपकरणों और स्क्रीन आकारों के लिए अलग-अलग डिस्प्ले, और बहुत कुछ नियंत्रित कर सकते हैं!

💡सहायता नोट:

जब "कैस्केडिंग" शब्द को किसी शैली में मूल तत्व पर लागू किया जाता है, तो यह मूल तत्व के भीतर सभी बाल तत्वों पर लागू होता है। इसलिए यदि आप मुख्य पाठ का रंग "नीला" पर सेट करते हैं, तो मुख्य भाग के अंदर सभी शीर्षकों, पैराग्राफों और अन्य पाठ तत्वों को एक ही रंग मिलेगा (जब तक कि आप कुछ और निर्दिष्ट न करें)!

सीएसएस का उपयोग करना

CSS को HTML दस्तावेज़ों में 3 तरीकों से जोड़ा जा सकता है:

Inline CSS

HTML तत्वों के भीतर स्टाइल विशेषता का उपयोग करना

Internal CSS

<head> अनुभाग में <style> तत्व का उपयोग करना

External CSS

बाहरी सीएसएस फ़ाइल से लिंक करने के लिए <लिंक> तत्व का उपयोग करना

🏆महत्वपूर्ण:

सीएसएस जोड़ने का सबसे आम तरीका शैलियों को बाहरी सीएसएस फाइलों में रखना है। हालाँकि, इस ट्यूटोरियल में हम इनलाइन और आंतरिक शैलियों का उपयोग करेंगे क्योंकि इसे प्रदर्शित करना आसान है और आपके लिए इसे स्वयं आज़माना आसान है।

Inline CSS

एक HTML तत्व में एक अनूठी शैली लागू करने के लिए इनलाइन सीएसएस का उपयोग किया जाता है।

एक इनलाइन सीएसएस HTML तत्व में स्टाइल विशेषता का उपयोग करता है।

उदाहरण

निम्नलिखित उदाहरण <h1> तत्व में टेक्स्ट का रंग नीला और <p> तत्व में टेक्स्ट का रंग लाल पर सेट करता है:

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

एक व्यक्तिगत HTML पृष्ठ के लिए शैली को परिभाषित करने के लिए एक आंतरिक CSS का उपयोग किया जाता है।

एक आंतरिक सीएसएस को HTML पृष्ठ के <head> अनुभाग में <style> तत्व के भीतर परिभाषित किया गया है।

उदाहरण

निम्नलिखित उदाहरण उस पृष्ठ पर सभी <h1> तत्वों के टेक्स्ट रंग को नीला और सभी <p> तत्वों के टेक्स्ट रंग को लाल पर सेट करता है। इसके अलावा, पृष्ठ को "पाउडरब्लू" रंग और उसके बाद बेज रंग के साथ प्रदर्शित किया जाएगा:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

एकाधिक HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए एक बाहरी स्टाइल शीट का उपयोग किया जाता है।

बाहरी स्टाइल शीट का उपयोग करने के लिए, प्रत्येक HTML पृष्ठ के <head> अनुभाग में इसके लिए एक लिंक जोड़ें:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

बाहरी स्टाइल शीट किसी भी टेक्स्ट एडिटर में लिखी जा सकती है। फ़ाइल में कोई HTML कोड नहीं होना चाहिए और इसे .css एक्सटेंशन के साथ सहेजा जाना चाहिए।

"styles.css" फ़ाइल:

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

🚀सहायता नोट:

बाहरी स्टाइल शीट के साथ, आप केवल एक फ़ाइल को बदलकर पूरी वेबसाइट का रूप बदल सकते हैं!

सीएसएस गुण

CSS Colors, Fonts and Sizes

यहां, हम आमतौर पर उपयोग की जाने वाली कुछ सीएसएस संपत्तियों का प्रदर्शन करेंगे। आप उनके बारे में बाद में और जानेंगे।

color property

उपयोग किए जाने वाले टेक्स्ट रंग को परिभाषित करता है

font-family property

उपयोग किए जाने वाले फ़ॉन्ट को परिभाषित करता है

font-size property

उपयोग किए जाने वाले टेक्स्ट आकार को परिभाषित करता है

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

बॉक्स मॉडल गुण

CSS Border

p {
  border: 2px solid powderblue;
}

सीएसएस सीमा संपत्ति एक HTML तत्व के चारों ओर एक सीमा को परिभाषित करती है।

CSS Padding

p {
  border: 2px solid powderblue;
  padding: 30px;
}

सीएसएस पैडिंग प्रॉपर्टी टेक्स्ट और बॉर्डर के बीच एक पैडिंग (स्पेस) को परिभाषित करती है।

CSS Margin

p {
  border: 2px solid powderblue;
  margin: 50px;
}

सीएसएस मार्जिन संपत्ति सीमा के बाहर एक मार्जिन (स्थान) को परिभाषित करती है।

📦सहायता नोट:

आप लगभग किसी भी HTML तत्व के लिए बॉर्डर परिभाषित कर सकते हैं।

External CSS Paths

बाहरी स्टाइल शीट को पूर्ण URL या वर्तमान वेब पेज से संबंधित पथ के साथ निर्दिष्ट किया जा सकता है।

उदाहरण व्याख्या 
<link rel="stylesheet" 
      href="https://www.jassifteam.com/styles.css">
 स्टाइल शीट से लिंक करने के लिए पूर्ण URL का उपयोग करता है 
<link rel="stylesheet" 
      href="/html/styles.css">
 वर्तमान वेबसाइट की HTML फ़ाइल में स्थित स्टाइल शीट से कनेक्ट होता है 
<link rel="stylesheet" 
      href="styles.css">
 वर्तमान पृष्ठ के समान फ़ोल्डर में स्थित स्टाइल शीट से जुड़ जाता है

आप HTML फ़ाइल पथ अध्याय में फ़ाइल पथों के बारे में अधिक जान सकते हैं।

अध्याय का सारांश

HTML style attribute- इनलाइन स्टाइलिंग के लिए उपयोग करें
HTML <style> element- आंतरिक सीएसएस को परिभाषित करने के लिए उपयोग करें
HTML <link> element- बाहरी सीएसएस फ़ाइल निर्दिष्ट करने के लिए उपयोग करें
HTML <head> element- <style> और <link> तत्वों को संग्रहीत करने के लिए उपयोग करें

सीएसएस गुण:

📚सहायता नोट:

आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में अधिक जान सकते हैं।

अभ्यास

बाहरी स्टाइलशीट से लिंक करने के लिए सही सिंटैक्स क्या है?

<style rel='stylesheet' href='styles.css'>
✗ ग़लत! <style> टैग का उपयोग बाहरी स्टाइलशीट के लिए नहीं किया जाता है
<link rel='stylesheet' href='styles.css'>
✓ ठीक है! <लिंक> टैग का उपयोग बाहरी स्टाइलशीट से लिंक करने के लिए किया जाता है
<a rel='stylesheet' href='styles.css'>
✗ ग़लत! <a> टैग का उपयोग हाइपरलिंक के लिए किया जाता है, स्टाइलशीट के लिए नहीं

HTML शैली टैग

टैग व्याख्या
<style> HTML दस्तावेज़ के लिए शैली जानकारी को परिभाषित करता है
<link> किसी दस्तावेज़ और बाहरी संसाधन के बीच एक लिंक को परिभाषित करता है

📖नोट:

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएँ।