एक बाहरी स्टाइल शीट परिभाषित करती है कि एक वेब पेज कैसा दिखता है। आप टेक्स्ट के आकार, रंग और फ़ॉन्ट, बटनों का रंग, या मेनू और साइडबार की स्थिति जैसी चीज़ों को निर्दिष्ट करने के लिए स्टाइल शीट का उपयोग कर सकते हैं।
बाहरी स्टाइल शीट में प्रयुक्त कोड
मूल वेब पेज बनाने के लिए दो प्रकार के कोड का उपयोग किया जाता है:
- हाइपर टेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल): वेब पेज की सामग्री को परिभाषित करता है। इसमें मार्क-अप के साथ वास्तविक टेक्स्ट होता है जो यह पहचानता है कि टेक्स्ट के सेक्शन पैराग्राफ, हेडिंग या सूचियां हैं या नहीं। इसमें पृष्ठ पर दिखाई देने वाली छवियों के लिंक और बाहरी पृष्ठों के हाइपरलिंक भी शामिल हैं।
- व्यापक शैली पत्रक (सीएसएस): एक कोडिंग भाषा जिसका उपयोग यह निर्दिष्ट करने के लिए किया जाता है कि सामग्री कैसे प्रदर्शित होती है। यह परिभाषित करता है कि प्रत्येक प्रकार का टेक्स्ट तत्व कैसे प्रदर्शित होता है और यदि वे अलग-अलग वर्गों से संबंधित हैं या एक अलग आईडी रखते हैं तो एक ही प्रकार के तत्व को अलग-अलग प्रदर्शित कर सकते हैं। यह मेनू और सूचियों जैसी चीजों को वेब पेज के मुख्य टेक्स्ट के भीतर बहुत अलग तरीके से व्यवहार करने की अनुमति देता है।
सामान्य तौर पर, शैली को सामग्री से अलग करना एक अच्छा विचार है, क्योंकि यह आपको एक समय में एक चीज़ पर ध्यान केंद्रित करने की अनुमति देता है। यह एक टीम में और भी महत्वपूर्ण हो जाता है, जिससे सामग्री और प्रस्तुति के विशेषज्ञों को बाकी हिस्सों से स्वतंत्र रूप से काम करने की अनुमति मिलती है। शायद इससे भी महत्वपूर्ण बात यह है कि यह स्टाइल निर्देशों के एक सेट को पूरी वेबसाइट पर समान रूप से लागू करने की अनुमति देता है।
वेबसाइट की दृश्य प्रस्तुति को प्रत्येक वेब पेज को व्यक्तिगत रूप से संपादित किए बिना एकल स्टाइल शीट से बदला जा सकता है। बड़ी जटिल वेबसाइटों के लिए, पृष्ठों के भीतर पाठ, मेनू और विभाजन को नियंत्रित करने के लिए कई स्टाइल शीट का उपयोग किया जा सकता है। स्टाइल शीट के इस संग्रह को "थीम" कहा जा सकता है।
HTML को CSS से जोड़ने के लिए बाहरी CSS का उपयोग करना
सीएसएस शैली को सीधे वेब पेज के एचटीएमएल में शामिल करना संभव है, प्रत्येक पैराग्राफ को अलग-अलग स्टाइल करने और अलग-अलग शीर्षक देने के लिए सीएसएस का उपयोग करना। इस प्रकार के इनलाइन स्टाइलिंग आम तौर पर एक अच्छा विचार नहीं है, क्योंकि आप शैली को सामग्री से अलग करने के सभी लाभों को खो देते हैं। सबसे विशेष रूप से, आप अपनी पूरी वेबसाइट को एक फ़ाइल से लगातार अपडेट करने की क्षमता खो देते हैं।
किसी वेबसाइट पर शैली लागू करने का सही तरीका यह है कि आप प्रत्येक प्रकार की शैली के लिए एक बाहरी स्टाइल शीट फ़ाइल बनाएं, जिसे आप लागू करना चाहते हैं, फिर इन फ़ाइलों को प्रत्येक HTML फ़ाइल से संदर्भित करें। उदाहरण के लिए, आपके पास निम्नलिखित बाहरी स्टाइल शीट हो सकती हैं:
- text.css
- मेनू.सीएसएस
- लेआउट.सीएसएस
आप उन बाहरी स्टाइल शीट में सीएसएस कोड में बदलाव किए बिना उनमें बदलाव कर सकते हैं आपके सभी वेब पेजों के HTML में फ़ाइल नाम, यानी उन फ़ाइलों के संदर्भ, नहीं होंगे बदला हुआ।
HTML और CSS के उदाहरण
एक बहुत ही सरल HTML पृष्ठ में निम्न कोड हो सकता है:
मेरे बारे में सब!
यह पेज मेरे बारे में है और मैं कमाल क्यों हूं।
यदि आप यह देखना चाहते हैं कि यह वेब ब्राउज़र में कैसा दिखता है, तो टेक्स्ट को टेक्स्ट एडिटर में कॉपी करें जैसे नोटपैड. फ़ाइल को "index.html" जैसी किसी चीज़ के रूप में सहेजें और पुरानी शैली की शैली देखने के लिए इसे अपने ब्राउज़र में खींचें।
नीचे दिए गए कोड को जोड़कर एक साधारण बाहरी स्टाइल शीट को इस पेज से जोड़ा जा सकता है।
टाइप = "टेक्स्ट/सीएसएस"
href = "myStyle.css" />
myStyle.css नामक एक अन्य टेक्स्ट फ़ाइल बनाएं, जो उसी फ़ोल्डर में स्थित है जिसमें index.html निम्न कोड है:
एच1 {
रंग: #FF7643;
फ़ॉन्ट-चेहरा: एरियल'
}
पी {
लाल रंग;
फ़ॉन्ट-आकार: 1.5em;
}
सीएसएस के साथ आप और भी बहुत कुछ कर सकते हैं। यदि आप और अधिक सीखना चाहते हैं, W3 स्कूल शुरू करने के लिए एक महान जगह है।