Introduction to CSS Free web designing Course Tutorials #13
Introduction To CSS
इसलिए अंत में, HTML को पूरा करने के बाद, हम रोमांचक भाग, यानी CSS की ओर बढ़ रहे हैं। CSS कास्केडिंग स्टाइल शीट्स के लिए खड़ा है और इसे आकर्षक बनाने के लिए वेबसाइट को डिजाइन करने के लिए उपयोग किया जाता है।
आइए पहले समझते हैं, CSS क्या है?
- CSS रॉ HTML को स्टाइल देता है
- यह कैस्केडिंग स्टाइल शीट्स के लिए है
- हमारे वेब पेजों को स्टाइल देने के लिए CSS का उपयोग किया जाता है
- वेबसाइटों को उत्तरदायी बनाने के लिए CSS का उपयोग किया जाता है
- CSS आपकी वेबसाइट में डिज़ाइन की जिम्मेदारी लेती है
CSS में वे सभी चीजें शामिल हैं जिनका उपयोग कच्चे HTML को पृष्ठभूमि और ग्रंथों को रंगने से लेकर सीमाओं को समायोजित करने, गद्दी देने आदि के लिए किया जा सकता है। इसके अलावा, CSS वेबसाइटों को उत्तरदायी बनाने में मदद करती है। उत्तरदायी का मतलब है कि साइट विभिन्न स्क्रीन आकारों के अनुसार व्यवहार करेगी। उदाहरण के लिए, यदि आप डेस्कटॉप पर और फिर अपने मोबाइल पर एक वेबसाइट खोलते हैं, तो आप उनके डिस्प्ले के बीच अंतर पाएंगे। यदि आप मोबाइल पर वेबसाइट खोलते हैं तो नेविगेशन बार के सभी घटक हैमबर्गर आइकन में चले जाएंगे।
हम HTML भाग में ही शैलियों को जोड़ सकते हैं, लेकिन मैं एक नई CSS फ़ाइल बनाने की सलाह दूंगा और फिर इसे HTML भाग में संलग्न करूँगा। ऐसा इसलिए है क्योंकि यह एक पेशेवर अभ्यास है जब विभिन्न डेवलपर्स एक वेबसाइट पर एक वेबसाइट के कंकाल को एक फाइल में रखने और दूसरी फाइल में स्टाइल रखने के लिए काम कर रहे हैं।
सीएसएस की भूमिका
- CSS एक स्टाइल शीट भाषा है जिसका उपयोग HTML वाले वेब पेज की प्रस्तुति को संभालने के लिए किया जाता है।
- यह हमारी वेबसाइटों को सुंदर और आधुनिक बनाता है।
सीएसएस सिंटेक्स
CSS का सिंटैक्स है-
P { color: blue; }
- P चयनकर्ता के लिए है और यह तय करता है कि HTML के किस हिस्से पर CSS लागू किया जाएगा। यह बताता है कि सीएसएस संपत्ति कहां लागू होनी है।
- संपत्ति का उपयोग यह वर्णन करने के लिए किया जाता है कि आप किस संपत्ति को बदलना या जोड़ना चाहते हैं। चाहे आपको रंग, सीमा, पृष्ठभूमि, चौड़ाई को बदलना पड़े, ये सभी संपत्ति के अंतर्गत आते हैं।
- अंतिम खंड मान को परिभाषित करने के लिए है। हमारे द्वारा प्रदान किए गए मूल्य के अनुसार सभी संपत्तियों को बदल दिया जाएगा।
हम एक समय में कई गुणों को भी लक्षित कर सकते हैं। वाक्य विन्यास इस प्रकार है-
header, p.intro { background-color: red;
border-radius: 3px,
}
उपरोक्त उदाहरण में, हमने हेडर टैग और पैराग्राफ टैग को क्लास इंट्रो के साथ पृष्ठभूमि रंग को लाल और बॉर्डर-त्रिज्या में बदलकर 3 पिक्सेल कर दिया है।
CSS को जोड़ने के तीन तरीके हैं-
- इनलाइन सीएसएस- सीएसएस को स्टाइल की विशेषताओं का उपयोग करके सीधे तत्वों में जोड़ा जाता है।
- आंतरिक सीएसएस- सीएसएस को <style> टैग में हेड टैग के अंदर रखा जाता है
- बाहरी CSS- CSS को .CSS स्टाइल शीट के अंदर अलग से रखा जाता है। इसमें दो चरण शामिल हैं-
- सबसे पहले, CSS in.CSS फ़ाइल लिखें।
- उस सीएसएस फ़ाइल को मार्कअप में शामिल करें।
अगले ट्यूटोरियल से, हम विज़ुअल स्टूडियो कोड में सीएसएस को लागू करने का व्यावहारिक कार्यान्वयन करना शुरू करेंगे।
Code 1:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Tutorial</title>
<style>
p{
color:rgb(245, 184, 245);
background-color: seagreen !important;
}
</style>
<link rel="stylesheet" href="tut13.css">
</head>
<body>
<h3>This is CSS Tutorial</h3>
<!-- <p style="color: red; background-color: yellow;">This tutorial will teach you everything you need to know about HTML/CSS</p> -->
<p>This tutorial will teach you everything you need to know about HTML/CSS</p>
</body>
</html>
Code 2:-
p{
color: greenyellow;
background-color: hotpink;
}
