सीएसएस स्टाइलशीट एचटीएमएल पेज को वांछित रूप से डिजाइन करने के लिये बनाई गई है । इसका प्रयोग सरल और आकर्षक है । इसके प्रयोग से आप बडी आसानी से अपने पेज को सुन्दर बना पाते हैं ।
इसका प्रयोग तीन तरह से किया जाता है ।
1- बाहर के सीएसएस स्टाइल डाक्यूमेण्ट को लिंक करके ।
2- हेड सेक्शन के स्टाइल टैग के अन्दर ।
3- सीधे वांछित एलीमेण्ट के अन्दर ।
अब इन तीनों का प्रयोग समझेंगे ।
बाहरी सीएसएस सीट को लिंक करना
इसके लिये पहले हम अपने स्टाइल कोडिंग को एक अलग सीएसएस डाक्यूमेण्ट में सेव कर लेते हैं । फिर इसे एचटीएमएल पेज के हेड सेक्शन में लिंक कर देते हैं । लिंक करने के लिये लिंक टैग का ही प्रयोग किया जाता है ।
<!DOCTYPE HTML>
<html>
<head>
<link rel='stylesheet' href="sjweb.css" />
</head>
<body>
<div id="content">
This is a div
</div>
</body>
</html>
आपका sjweb.css डाक्यूमेण्ट संक्षेप में कुछ इस तरह हो सकता है ।
body
{
background:yellow;
font-family:Kruti Dev 010;
}
#content
{
width:1000px;
height:600px;
background:white;
border:1px solid green;
}
इसमें अन्य चीजें भी जोडी जा सकती हैं आवश्यकतानुसार । इसका विस्तृत अध्ययन हम सीएसएस ट्यूटोरियल में करेंगे ।
हेड सेक्शन के स्टाइल टैग के अन्दर सीएसएस प्रयोग
<!DOCTYPE HTML>
<html>
<head>
<style>
body
{
background:yellow;
font-family:Kruti Dev 010;
}
#content
{
width:1000px;
height:600px;
background:white;
border:1px solid green;
}
</style>
</head>
<body>
<div id="content">
This is a div
</div>
</body>
</html>
इसका भी परिणाम वही होगा जो उपर के कोड का होगा । फर्क केवल इतना है कि यह कोडिंग आपके एचटीएमएल पेज में ही रहेगी । कही अन्यत्र नहीं ।
एलीमेण्ट के अन्दर सीएसएस स्टाइल का प्रयोग
<!DOCTYPE HTML>
<html>
<head>
</head>
<body style="background:yellow; font-family:Kruti Dev 010;">
<div style="width:1000px; height:600px; background:white; border:1px solid green;">
This is a div
</div>
</body>
</html>
इन तीनों ही कोडिंग्स का परिणाम ठीक एक ही प्रकार का होगा ।
इसका प्रयोग सर्वाधिक प्रौढ होता है । प्रौढ से आशय उसकी प्राथमिकता से है । आप के पूरे पेज की स्टाइल कुछ भी हो किन्तु किसी वांछित एलीमेण्ट की स्टाइल को परिवर्तित करने के लिये उस एलीमेण्ट के अन्दर सीएसएस का प्रयोग कर देने से पेज की स्टाइल का प्रभाव उस एलीमेण्ट से समाप्त हो जाता है और उस पर आपकी स्टाइल टैग द्वारा की गई स्टाइल प्रभावी हो जाती है ।
Comments
Post a Comment