नए कोडर्स के रूप में, हम सबसे पहले अपने वेब पेजों में इनलाइन-स्टाइलिंग के रूप में सीएसएस को शामिल करना शुरू करते हैं। हम CSS को सीधे अपने HTML एलिमेंट पर इंजेक्ट करने के लिए स्टाइल एट्रिब्यूट का उपयोग करते हैं:
<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>
जैसे-जैसे हम अधिक जटिल साइटों पर जाते हैं, हम अपने सीएसएस को आंतरिक सीएसएस के रूप में शामिल करने के लिए आगे बढ़ते हैं। यहीं पर हम अपने सभी CSS को <style> . के बीच में लिखते हैं <head> . में टैग HTML दस्तावेज़ का अनुभाग:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
h1, h4 {
text-align: center;
}
h1 {
color: blue;
}
h4 {
color: red;
}
</style>
</head>
<body>
<h1>Star Wars</h1>
<h4>Return of the Jedi</h4>
</body>
</html> यह हमारे एचटीएमएल को अच्छी तरह से साफ करता है। हालाँकि, क्या होगा यदि हमारे पास CSS की 500 लाइनें हों? इस फ़ाइल को बहुत जल्दी पढ़ना मुश्किल हो जाएगा। हालांकि, हमारे पास बाहरी स्टाइलशीट बनाने और फिर उन्हें हमारी HTML फ़ाइल से लिंक करने की क्षमता है!
सेटअप:
- आपके मुख्य प्रोजेक्ट फ़ोल्डर में जहां आपका index.html फ़ाइल है, index.css नामक एक नई फ़ाइल बनाएँ। index.css फ़ाइल हमारी index.html फ़ाइल के लिए सभी CSS को होल्ड करने वाली है। मैं अपनी सीएसएस फाइलों को एचटीएमएल फाइलों के नाम पर रखना पसंद करता हूं, जो चीजों को व्यवस्थित रखने के लिए स्टाइल करते हैं, लेकिन जब तक आप जानते हैं कि वे कौन सी फाइलें स्टाइल कर रहे हैं, तब तक आप निश्चित रूप से उन्हें नाम दे सकते हैं।
- यदि आपके पास
<style>. के बीच में CSS है<head>. में टैग अपनी HTML फ़ाइल में, संबंधित CSS फ़ाइल में केवल CSS कोड (कोई टैग नहीं) को काटें और चिपकाएँ। <head>. में अपनी HTML फ़ाइल में, आप एक टैग बनाने जा रहे हैं जो आपकी CSS फ़ाइल की ओर इशारा करता है:
<link rel="stylesheet" type="text/css" href="./index.css">
लिंक तीन भागों से बना है:
- रिले विशेषता: यह हमें बताता है कि इस फ़ाइल और दूसरी फ़ाइल के बीच एक संबंध होने जा रहा है, और यह लिंक हमें बताएगा कि वह संबंध क्या है।
- प्रकार विशेषता: लिंक की गई फ़ाइल का HTML फ़ाइल से संबंध के प्रकार का वर्णन करता है।
- Href विशेषता: फ़ाइल का सापेक्ष पथ जहाँ से HTML फ़ाइल है - फ़ाइल का स्थान।
याद रखें कि भले ही हम CSS फ़ाइल को HTML फ़ाइल से अलग कर रहे हैं, फिर भी CSS की कैस्केडिंग प्रकृति सर्वोच्च है। इसका मतलब है कि अगर आपके पास कई सीएसएस फाइलें हैं, तो आपको यह करना होगा:
1. प्रत्येक व्यक्तिगत सीएसएस फ़ाइल की ओर इशारा करते हुए एक <लिंक> रखें।
2. सुनिश्चित करें कि वे फ़ाइलें उस क्रम में हैं जिस क्रम में आपको उनकी आवश्यकता है ताकि उचित स्टाइल शो हो। यदि वे उचित क्रम में नहीं हैं, तो स्टाइल काम नहीं कर सकता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।
बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।
यही सब है इसके लिए। अब आप अपने प्रोजेक्ट के लिए बाहरी स्टाइलशीट बनाने की राह पर हैं!