एचटीएमएल शैलियाँ - सीएसएस
CSS का मतलब कैस्केडिंग स्टाइल शीट्स है।
CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।
सीएसएस = शैलियाँ और रंग
सीएसएस क्या है?
कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग वेबपेज के लेआउट को प्रारूपित करने के लिए किया जाता है।
सीएसएस के साथ, आप रंग, फ़ॉन्ट, टेक्स्ट का आकार, तत्वों के बीच की दूरी, तत्वों को कैसे तैनात और निर्धारित किया जाता है, पृष्ठभूमि छवियों या पृष्ठभूमि रंगों का उपयोग करने के लिए, विभिन्न उपकरणों और स्क्रीन आकारों के लिए अलग-अलग डिस्प्ले को नियंत्रित कर सकते हैं, और बहुत अधिक!
युक्ति: कैस्केडिंग शब्द का अर्थ है कि मूल तत्व पर लागू शैली माता-पिता के भीतर सभी बच्चों के तत्वों पर भी लागू होगी। इसलिए, यदि आप मुख्य भाग के पाठ का रंग "नीला" पर सेट करते हैं, तो सभी शीर्षकों, अनुच्छेदों और मुख्य भाग के अन्य पाठ तत्वों को भी एक ही रंग मिलेगा (जब तक कि आप कुछ और निर्दिष्ट नहीं करते)!
सीएसएस का उपयोग करना
CSS को HTML दस्तावेज़ों में 3 तरीकों से जोड़ा जा सकता है:
- इनलाइन
style- HTML तत्वों के अंदर विशेषता का उपयोग करके - आंतरिक - अनुभाग
<style>में एक तत्व का उपयोग करके<head> - बाहरी -
<link>बाहरी सीएसएस फ़ाइल से लिंक करने के लिए एक तत्व का उपयोग करके
CSS जोड़ने का सबसे आम तरीका है, शैलियों को बाहरी CSS फाइलों में रखना। हालाँकि, इस ट्यूटोरियल में हम इनलाइन और आंतरिक शैलियों का उपयोग करेंगे, क्योंकि यह प्रदर्शित करना आसान है, और आपके लिए इसे स्वयं आज़माना आसान है।
इनलाइन सीएसएस
एक इनलाइन CSS का उपयोग एक HTML तत्व में एक अनूठी शैली लागू करने के लिए किया जाता है।
एक इनलाइन सीएसएस styleएक HTML तत्व की विशेषता का उपयोग करता है।
निम्न उदाहरण तत्व के टेक्स्ट रंग <h1>को नीला और तत्व के टेक्स्ट रंग <p>को लाल रंग में सेट करता है:
उदाहरण
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
आंतरिक सीएसएस
एक HTML पृष्ठ के लिए शैली को परिभाषित करने के लिए एक आंतरिक CSS का उपयोग किया जाता है।
एक आंतरिक सीएसएस एक तत्व <head>के भीतर एक HTML पृष्ठ के अनुभाग में परिभाषित किया गया है।<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>
बाहरी सीएसएस
कई HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए एक बाहरी स्टाइल शीट का उपयोग किया जाता है।
बाहरी स्टाइल शीट का उपयोग करने के लिए, <head>प्रत्येक HTML पृष्ठ के अनुभाग में इसमें एक लिंक जोड़ें:
उदाहरण
<!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" फ़ाइल कैसी दिखती है:
"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
युक्ति: बाहरी स्टाइल शीट के साथ, आप एक फ़ाइल को बदलकर, पूरी वेब साइट का रूप बदल सकते हैं!
सीएसएस रंग, फ़ॉन्ट और आकार
यहां, हम कुछ सामान्य रूप से उपयोग किए जाने वाले CSS गुणों को प्रदर्शित करेंगे। आप उनके बारे में बाद में जानेंगे।
CSS colorगुण उपयोग किए जाने वाले टेक्स्ट रंग को परिभाषित करता है।
CSS font-familyगुण उपयोग किए जाने वाले फ़ॉन्ट को परिभाषित करता है।
CSS font-sizeगुण उपयोग किए जाने वाले टेक्स्ट आकार को परिभाषित करता है।
उदाहरण
CSS रंग, फ़ॉन्ट-परिवार और फ़ॉन्ट-आकार के गुणों का उपयोग:
<!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गुण एक HTML तत्व के चारों ओर एक सीमा को परिभाषित करता है।
युक्ति: आप लगभग सभी HTML तत्वों के लिए एक सीमा निर्धारित कर सकते हैं।
उदाहरण
सीएसएस सीमा संपत्ति का उपयोग:
p {
border: 2px
solid powderblue;
}
सीएसएस पैडिंग
CSS paddingगुण टेक्स्ट और बॉर्डर के बीच एक पैडिंग (स्पेस) को परिभाषित करता है।
उदाहरण
CSS बॉर्डर और पैडिंग गुणों का उपयोग:
p {
border: 2px
solid powderblue;
padding: 30px;
}
सीएसएस मार्जिन
CSS marginसंपत्ति सीमा के बाहर एक मार्जिन (स्थान) को परिभाषित करती है।
उदाहरण
CSS बॉर्डर और मार्जिन गुणों का उपयोग:
p {
border: 2px
solid powderblue;
margin: 50px;
}
बाहरी सीएसएस से लिंक करें
बाहरी स्टाइल शीट को एक पूर्ण यूआरएल या वर्तमान वेब पेज के सापेक्ष पथ के साथ संदर्भित किया जा सकता है।
उदाहरण
यह उदाहरण स्टाइल शीट से लिंक करने के लिए एक पूर्ण URL का उपयोग करता है:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
उदाहरण
यह उदाहरण वर्तमान वेब साइट पर html फ़ोल्डर में स्थित स्टाइल शीट से लिंक करता है:
<link rel="stylesheet" href="/html/styles.css">
उदाहरण
यह उदाहरण वर्तमान पृष्ठ के समान फ़ोल्डर में स्थित स्टाइल शीट से लिंक करता है:
<link rel="stylesheet" href="styles.css">
आप फ़ाइल पथों के बारे में और अधिक अध्याय HTML फ़ाइल पथ में पढ़ सकते हैं ।
अध्याय का सारांश
styleइनलाइन स्टाइलिंग के लिए HTML विशेषता का उपयोग करें<style>आंतरिक सीएसएस को परिभाषित करने के लिए HTML तत्व का प्रयोग करें<link>बाहरी CSS फ़ाइल को संदर्भित करने के लिए HTML तत्व का उपयोग करें<head><शैली> और <लिंक> तत्वों को संग्रहीत करने के लिए HTML तत्व का उपयोग करेंcolorटेक्स्ट रंगों के लिए CSS गुण का उपयोग करेंfont-familyटेक्स्ट फॉन्ट के लिए CSS प्रॉपर्टी का उपयोग करेंfont-sizeटेक्स्ट साइज के लिए CSS प्रॉपर्टी का इस्तेमाल करेंborderबॉर्डर के लिए CSS प्रॉपर्टी का उपयोग करेंpaddingसीमा के अंदर जगह के लिए सीएसएस संपत्ति का प्रयोग करेंmarginसीमा के बाहर स्थान के लिए CSS गुण का उपयोग करें
युक्ति: आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में और जान सकते हैं ।
एचटीएमएल व्यायाम
HTML स्टाइल Tags
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।