CSS कैसे बनाया जाता है

स्टाइलशीट को कैसे जोड़ें

जब ब्राउज़र एक स्टाइलशीट को पढ़ता है, तो वह उसके अनुसार HTML दस्तावेज़ को फ़ॉर्मेट करता है। स्टाइलशीट को जोड़ने के तीन तरीके हैं:

बाहरी स्टाइलशीट

जब स्टाइल कई पृष्ठों पर लागू करनी हो तो, बाहरी स्टाइलशीट आदर्श विकल्प होगा। बाहरी स्टाइलशीट के उपयोग के दौरान, आप एक फ़ाइल को बदलकर पूरे साइट के आकार को बदल सकते हैं। हर पृष्ठ <link> टैग के द्वारा स्टाइलशीट से जुड़ी है।<link> टैग दस्तावेज़ के शीर्ष में है:

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

ब्राउज़र, mystyle.css फ़ाइल से स्टाइल घोषणाओं को पढ़ता है और उसके अनुसार दस्तावेज़ को फ़ॉर्मेट करता है。

बाहरी स्टाइलशीट को किसी भी टेक्स्ट एडिटर में संपादित किया जा सकता है। फ़ाइल में कोई भी html टैग नहीं होना चाहिए। स्टाइलशीट को .css एक्सटेंशन के साथ सहेजा जाना चाहिए। यहाँ एक स्टाइलशीट फ़ाइल का उदाहरण दिया गया है:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

एट्रिब्यूट मान के साथ एक खाली जगह न छोड़े। यदि आप "margin-left: 20 px" का उपयोग करें और नहीं "margin-left: 20px" का उपयोग करें, तो यह केवल IE 6 में प्रभावी होगा, लेकिन Mozilla/Firefox या Netscape में सही ढंग से काम नहीं करेगा。

आंतरिक स्टाइलशीट

जब एक अकेला दस्तावेज़ को विशेष स्टाइल की आवश्यकता हो तो, आंतरिक स्टाइलशीट का उपयोग करना चाहिए। आप दस्तावेज़ के शीर्ष में <style> टैग का उपयोग करके आंतरिक स्टाइलशीट को परिभाषित कर सकते हैं, इस तरह:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

इनलाइन स्टाइल

क्योंकि प्रदर्शन और सामग्री को मिलाकर रखा जाएगा, इनलाइन स्टाइल में स्टाइलशीट के कई लाभ खो जाएंगे। इस तरीके का उपयोग संदिग्ध रहे, उदाहरण के लिए जब स्टाइल केवल एक एलिमेंट पर लागू करना हो।

इनलाइन स्टाइल का उपयोग करने के लिए, आपको संबंधित टैग के अंदर स्टाइल (style) एट्रिब्यूट का उपयोग करना होगा। स्टाइल एट्रिब्यूट में किसी भी CSS एट्रिब्यूट को शामिल किया जा सकता है। इस उदाहरण में, पैराग्राफ की रंग और बाएँ बाहरी मार्ग को बदलने के तरीके दिखाया गया है:

<p> style="color: sienna; margin-left: 20px">
यह एक पैराग्राफ है
</p>

बहुशैली

यदि कुछ गुण विभिन्न स्टाइल शीटों में एक ही सेलेक्टर द्वारा परिभाषित किए गए हैं, तो गुण के मूल्य विशिष्ट स्टाइल शीट से विरासत किए जाएंगे।

उदाहरण के लिए, बाहरी स्टाइल शीट में h3 सेलेक्टर के लिए तीन गुण हैं:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

और आंतरिक स्टाइल शीट में h3 सेलेक्टर के लिए दो गुण हैं:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

यदि इस पृष्ठ पर आंतरिक स्टाइल शीट से जुड़ा हुआ हो और बाहरी स्टाइल शीट से भी जुड़ा हुआ हो, तो h3 को मिलने वाला स्टाइल यह होगा:

color: red; 
text-align: right; 
font-size: 20pt;

इसके बाद, रंग गुण (color) बाहरी स्टाइल शीट में से विरासत किया जाएगा, और लेख रेखांकन (text-alignment) और फ़ॉन्ट आकार (font-size) आंतरिक स्टाइल शीट के नियमों से बदल जाएंगे।