CSS को HTML से लिंक कैसे करें ताकि मार्कअप अधिक पठनीय हो

नए कोडर्स के रूप में, हम पहली बार अपने वेब पेजों में CSS को इंलाइन-स्टाइलिंग के रूप में शामिल करना शुरू करते हैं। हम स्टाइल विशेषता का उपयोग करके सीधे अपने HTML एलिमेंट पर CSS इंजेक्ट करते हैं: 

<!DOCTYPE html> <html> <head> <title>इंलाइन स्टाइल</title> </head> <body> <h1 style="color:blue;text-align:center;">स्टार वार्स</h1> <h4 style="color:red;text-align:center;">रिटर्न ऑफ द जेडी</h4> </body> </html>

जैसे-जैसे हम अधिक जटिल साइट्स की ओर बढ़ते हैं, हम अपने CSS को इंटरनल CSS के रूप में शामिल करने की ओर बढ़ते हैं। यह वह जगह है जहां हम अपने सभी CSS को HTML दस्तावेज़ के <head> सेक्शन में <style> टैग्स के बीच लिखते हैं:

<!DOCTYPE html> <html> <head> <title>इंटरनल CSS</title> <style> h1, h4 { text-align: center; } h1 { color: blue; } h4 { color: red; } </style> </head> <body> <h1>स्टार वार्स</h1> <h4>रिटर्न ऑफ द जेडी</h4> </body> </html>

यह हमारे HTML को अच्छी तरह से साफ करता है। हालांकि, क्या होगा अगर हमारे पास 500 लाइन्स का CSS हो? यह फाइल बहुत जल्दी पढ़ने में कठिन हो जाएगी। हालांकि, हमारे पास एक्सटर्नल स्टाइलशीट्स बनाने और फिर उन्हें हमारी HTML फाइल से लिंक करने की क्षमता है!  

सेटअप:

1. अपने मुख्य प्रोजेक्ट फोल्डर में जहां आपकी index.html फाइल है, index.css नामक एक नई फाइल बनाएं। index.css फाइल हमारे index.html फाइल के लिए सभी CSS को रखने जा रही है। मैं अपनी CSS फाइलों का नाम उन HTML फाइलों के नाम पर रखना पसंद करता हूं जिन्हें वे स्टाइल करते हैं ताकि चीजें व्यवस्थित रहें, लेकिन आप निश्चित रूप से उन्हें जो चाहें नाम दे सकते हैं जब तक आप जानते हैं कि वे कौन सी फाइलों को स्टाइल कर रहे हैं। 
2. यदि आपके HTML फाइल के <head> में <style> टैग्स के बीच CSS है, तो केवल CSS कोड काटें और पेस्ट करें (कोई टैग नहीं) संबंधित CSS फाइल में। 
3. अपनी HTML फाइल के <head> में, आप एक <link> टैग बनाने जा रहे हैं जो आपकी CSS फाइल की ओर इशारा करता है: 

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

लिंक तीन भागों से बना है:

1. rel विशेषता: यह बताता है कि इस फाइल और दूसरी फाइल के बीच एक संबंध होने वाला है, और यह लिंक हमें बताएगा कि वह संबंध क्या है। 
2. type विशेषता: लिंक की गई फाइल के HTML फाइल से संबंध के प्रकार का वर्णन करता है। 
3. href विशेषता: HTML फाइल कहां है वहां से फाइल का सापेक्ष पथ - फाइल का स्थान।

याद रखें कि भले ही हम CSS फाइल को HTML फाइल से अलग कर रहे हैं, CSS की कैस्केडिंग प्रकृति अभी भी सर्वोच्च है। इसका मतलब है कि यदि आपके पास कई CSS फाइल्स हैं, तो आपको आवश्यकता होगी:

1. प्रत्येक व्यक्तिगत CSS फाइल की ओर इशारा करने वाला एक <link> हो।

2. सुनिश्चित करें कि वे फाइल्स उस क्रम में हैं जिस क्रम में आपको उनकी आवश्यकता है ताकि उचित स्टाइलिंग दिखाई दे। यदि वे उचित क्रम में नहीं हैं, तो स्टाइलिंग काम नहीं कर सकती है।

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।

औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।

बस इतना ही है। अब आप अपने प्रोजेक्ट के लिए एक्सटर्नल स्टाइलशीट्स बनाने की राह पर हैं!