सीएसएस सिन्‍टैक्‍स - (CSS Syntax)

 
      सीएसएस क्‍या होता है व इसका प्रयोग क्‍यूँ किया जाता है इस विषय में हमने पर्याप्‍त जान लिया । सीएसएस के प्रयोग का तरीका क्‍या होता है यह भी हमने पीछे समझ लिया किन्‍तु सबसे महत्‍वपूर्ण बात अभी भी समझनी बाकी है । सीएसएस के कोड कैसे लिखे जाते हैं व इन्‍हे एचटीएमएल के साथ कैसे संयुक्‍त किया जाता है । अब हम इसी बात पर चर्चा करेंगे ।  यह एक महत्‍वपूर्ण ही नहीं बल्कि अनिवार्य बिन्‍दु है क्‍यूँकि इसके बिना हम कोडिंग कर ही नहीं सकते हैं ।

      सीएसएस का प्रयोग एचटीएमएल में सेलेक्‍टर्स के सहारे किया जाता है । ये सेलेक्‍टर आईडी, क्‍लास या ब्‍लाक कुछ भी हो सकते हैं ।

      यदि हमें किसी ब्‍लाक पर सीएसएस का प्रयोग करना है तो सबसे पहले हमें उस ब्‍लाक को सेलेक्‍टर का स्‍वरूप देना होगा । सेलेक्‍टर बनाने के लिये या तो हम उस ब्‍लाक की आईडी निर्धारित करें, या क्‍लास निर्धारित करें अथवा सीधे उस ब्‍लाक के प्रकार को ही सेलेक्‍टर बनाकर प्रयोग कर लें ।
उदाहरण -
p {color:green; font-size:20px;}

      यहाँ पर पैराग्राफ को सेलेक्‍टर बनाकर उससे सीएसएस को जोडा गया है । इस कोडिंग के द्वारा आपके पेज के पैराग्राफ के शब्‍दों का आकार  20 पिक्‍सल और रंग हरा हो जायेगा । किन्‍तु इस तरह के सेलेक्‍टर की एक लिमिट यह है कि किसी ब्‍लाक को सेलेक्‍टर बना लेने पर आपके पेज के सारे ब्‍लाक्स पर एक ही सीएसएस कोड अप्‍लाई हो जायेगा । उपर हमने जो कोड लिखा इससे आपके पेज में जितने भी पैराग्राफ्स होंगे उन सभी के शब्‍दों का रंग हरा और शब्‍दआकार 20 पिक्‍सल हो जायेगा । इसी तरह h1 {color:green; font-size:20px;} के प्रयोग से पेज के सभी बडे हेडिंग्‍स पर ये कोड अप्‍लाई हो जायेगा । इसी तरह div {color:green; font-size:20px;} कोड के प्रयोग से सारे डीआईवी एक जैसे हो जाएँगे ।
       किन्‍तु यदि हमारे पेज में दो डीआईवी टैग्स, अथवा दो एच1 टैग्‍स अथवा पैराग्राफ हों और हम दोनों को अलग अलग डिजाइन करना चाह रहे हों तो फिर इसका आसान सा तरीका है आईडी या क्‍लास बना लेना ।
देखें -
<div id="block1">This is First Block</div>
<div id="block2">This is Second Block</div><h1 id=”hdng1”>Example of CSS</h1>
<h1 id=”hdng2”>Another Example of CSS</h1><p id="para1">This is an Example of CSS linked from outside</p>
<p id="para2">This is another Example of CSS linked from outside</p>

      अब हम आसानी से इन आईडीज को सेलेक्‍ट करके इनको डिजाइन कर सकते हैं ।
उदाहरण -
block1 {border:1px solid green; color:red; font-size:20px;}
block2 {border:2px solid red; color: blue; font-size:22px;}
hdng1 {border:1px solid blue; color:green; font-size:18px;}
hdng2 {border:2px solid pink; color: purple; font-size:24px;}
para1 {border:1px solid yellow; color: pink; font-size:18px;}
para2 {border:2px solid purple; color:yellow; font-size:20px;}

      इसी तरह हम आईडी की जगह क्‍लास लिख कर इन सभी को अलग अलग क्‍लास दे सकते हैं । इन क्‍लास का प्रयोग भी आईडी की तरह ही होता है ।
उदाहरण -
<div class="block1">This is First Block</div>
block1 {border:1px solid green; color:red; font-size:20px;}

      इन कोड्स को देखकर आपने इनके प्रयोग में जो बातें बिलकुल समान थीं उनको समझने की कोशिश की होगी ।
अब इन्‍हें समझते हैं -
      प्रत्‍येक कोड के शुरुआत में जिस एचटीएमएल ब्‍लाक या टैग पर सीएसएस अप्‍लाई करना है उसे लिखा गया है उसके तुरंत बाद या एक खाली जगह देकर एक कर्ली ब्रेकट (मझला कोष्‍ठक) शुरू किया गया, उस ब्रेकट के अन्‍दर डिक्‍लेरेशन (प्रापर्टी : वैल्‍यू ) लिखा गया । ये डिक्‍लेरेशन्स एक से अधिक हो सकते हैं । प्रत्‍येक डिक्‍लेरेशन के अन्‍त में एक अर्धविराम चिन्‍ह लगाया गया जिससे अलग अलग डिक्‍लेरेशन दिखाई पडें । और सबसे अन्‍त में मझले कोष्‍ठक को बन्‍द कर दिया गया ।
उदाहरण -

ध्‍यान देने योग्‍य बातें -

• सीएसएस कोड एचटीएमएल सेलेक्‍टर के जरिये काम करते हैं ।
• हर कोड एक डिक्‍लेरेशन होता है ।
• हर डिक्‍लेरेशन में एक प्रापर्टी व एक वैल्‍यू होता है ।
• ये डिक्‍लेरेशन कर्ली ब्रेकट के अन्‍दर रखा जाता है ।
• हर डिक्‍लेरेशन के बाद एक अर्धविराम चिन्‍ह लगाया जाता है ।
• सेलेक्‍टर के द्वारा स्‍टाइल करने की प्रक्रिया की आवश्‍यकता टैग के अन्‍दर स्‍टाइल कोड रखते समय नहीं पडती है । वहाँ मात्र स्‍टाइल टैग के अन्‍दर सारे सीएसएस कोड रखकर काम चल जाता है ।
• सीएसएस कोड एक बार में एक से अधिक सेलेक्‍टर पर लागू हो सकते हैं ।
• इन कोड्स को आसानी से समझने के लिये उन्‍हे तोड कर निम्‍न तरीके से भी लिखा जा सकता है ।

           div
              {
               border:1px solid green;
               color:red;
               font-size:20px;
               }

      यह ठीक पहले के कोड्स की ही भाँति काम करेगा ।