पीछे हमने देखा कि किस तरह हम अपने सीएसएस स्टाइलशीट को बाहर से अपने एचटीएमएल पेज में लिंक कर सकते हैं ।
<link rel="stylesheet" href="style.css" />
सीएसएस डाक्यूमेण्ट को लिंक करने के लिये इस कोड को एचटीएमएल पेज के हेड सेक्शन में लिखते हैं । आइये इस कोड को ठीक तरह से समझते हैं ।
<link - लिंक टैग का प्रारम्भ
rel= - लिंक का रिलेशन (रिस्ता या प्रकार) दर्शाता है । ( ये लिखना महत्वपूर्ण है अन्यथा कोड काम नहीं करेगा )।
"stylesheet" - लिंक का प्रकार स्टाइलशीट (ये ब्राउजर को बताता है कि लिंक किया गया पेज एक स्टाइलशीट पेज है)
href= - सोर्स को डिफाइन करता है ।
"style.css" - ये आपका वास्तविक स्टाइलशीट डाक्यूमेण्ट है जो आपके डेस्कटाप या किसी फोल्डर में स्टाइल.सीएसएस नाम से सुरक्षित किया गया है ।
/> - लिंक को क्लोज करता है ।
आगे इसके विषय में और भी विस्तार से जानेंगे ।
2 - सीएसएस का एचटीएमएल हेड सेक्शन में प्रयोग -
सीएसएस स्टाइलकोडिंग को एचटीएमएल पेज के अन्दर हेड सेक्शन के अन्तर्गत ओपिनिंग स्टाइल टैग व क्लोजिंग स्टाइल टैग के भीतर रखा जाता है ।उदाहरण -
<!doctype html><head>
<title>Learn CSS </title>
<style>body
{background:green;}
#container
{
margin:auto;
background:white;
border:2px solid yellow;
width:900px;
padding:50px;
height:400px;
}
h1{color:red;}
p{color:green; font-family:Times New Roman; font-size:20px;}
</style>
</head>
<body>
<div id="container">
<h1>Example of CSS</h1>
<p>This is an Example of CSS linked from outside</p>
</div>
</body>
</html>
इस कोडिंग को ध्यान से देखें । पिछले अध्याय में जो कोडिंग हमने दो पेज में मिलाकर की थी जिसमें एक पेज होम.एचटीएमएल था तथा दूसरा स्टाइल.सीएसएस था, उन दोनों को मिलाकर हमने एक ही एचटीएमएल पेज के अन्दर रख दिया । सारा कोड जैसे का तैसा रखा बस केवल लिंक कोड <link rel="stylesheet" href="style.css" /> को हटाकर स्टाइल टैग के अन्दर स्टाइल.सीएसएस पेज की कोडिंग को रख दी ।
आपके पेज का परिणाम ठीक वही रहेगा जो पहले हुआ करता था । यहाँ आपका सारा काम दो पेज की जगह एक ही पेज में हो गया । इसमें हमें बाहर से किसी भी दूसरे डाक्यूमेण्ट को लिंक करने की आवश्यकता भी नहीं पडी ।
एचटीएमएल पेज के अन्दर ही सीएसएस स्टाइल का प्रयोग तब ज्यादा बेहतर माना जाता है जब कि आपका पेज बहुत ही छोटा व कम फीचर्स वाला हो । ज्यादा बडा या अधिक फीचर वाले पेज में सीएसएस कोडिंग को एक ही पेज में लिखने पर आपका डाक्यूमेण्ट बहुत ही अधिक बडा हो जाता है जिससे आपको बाद में किसी भी सुधार के लिये बडी दिक्कत का सामना करना पडता है ।
3- सीएसएस का प्रयोग सीधे टैग या एलीमेण्ट के अन्दर -
जब आपके वेबपेज के किसी विशेष भाग को अलग तरीके की डिजाइनिंग प्रदान करनी हो अथवा किसी नये ब्लाक की संरचना अल्प समय के लिये की जा रही हो तो यह विधि आपके लिये सबसे महत्वपूर्ण विधि हो जाती है ।इस विधि में आपका सीएसएस कोड आपके एलीमेण्ट के अन्दर ही स्टाइल टैग के द्वारा वेरीफाई होता है । जिससे आपके ब्राउजर को समझ में आ जाता है कि उक्त ब्लाक को अलग डिजाइन प्रदान की गई है । -
आइये इसे कर के देखते हैं -
<!doctype html>
<head>
<title>Learn CSS </title>
</head>
<body style="background:green;">
<div style="margin:auto; background:white; border:2px solid yellow; width:900px; padding:50px; height:400px;">
<h1 style="color:red;">Example of CSS</h1>
<p style="color:green; font-family:Times New Roman; font-size:20px;">This is an Example of CSS linked from outside</p>
</div>
</body>
</html>
इस कोड को ध्यान से देखें । आप देखेंगे कि आपकी पिछली कोडिंग जो कि हेड सेक्शन के अन्दर स्टाइल टैग के अन्दर लिखी गई थी वो अब बिखर कर हर एलीमेण्ट के अन्दर लिख दी गई है । आपके पेज का परिणाम फिर भी वही दिखेगा जो पिछले दो प्रयोगों में दिखता था ।
इस तरह सीएसएस कोडिंग का प्रयोग उक्त तीन विधियों के द्वारा किया जा सकता है । इन विधियों में सबसे ज्यादा शक्तिशाली विधि किसी एलीमेण्ट के अन्दर स्टाइल का प्रयोग करना है । आपके पेज की चाहे जो स्टाइल हो किन्तु यदि किसी विशेष एलीमेण्ट के अन्दर आप कुछ और स्टाइल दे देते हैं तो आपके उस एलीमेण्ट की कोडिंग पूरे पेज से अलग हो जाती है ।
तीसरा तरीका कहीं ज्यादा आसान है किन्तु इसकी एक सीमा है । यदि आपके पेज पर कई ब्लाक्स हुए व हर ब्लाक की स्टाइल एक जैसी हुई तो पहले दो तरीके आपके लिये कहीं अधिक आसान होंगे, बजाय तीसरे तरीके के ।
आगे हम सीएसएस सेलेक्टर अर्थात् सीएसएस कोडिंग के लिये किसी ब्लाक या एलीमेण्ट को कैसे चुनें यह सीखेंगे ।।
html नमूना कोड वेबमास्टर्स को स्निपेट करता है
ReplyDeleteपैराग्राफ टैग फ़ॉन्ट-आकार पैडिंग पृष्ठभूमि रंग नमूना कोड