CSS Syntax क्या है?
CSS में कोड लिखने से पहले आपको जिस पहले टॉपिक में मास्टरी हासिल करनी होगी, वह है सिंटैक्स। syntax शब्द भले ही डराने वाला लगे, लेकिन यह केवल उन नियमों को संदर्भित करता है जिनका उपयोग हम CSS में कोड लिखने के लिए करते हैं। ये नियम स्टैंडर्ड हैं, जिससे दूसरे लोगों का कोड पढ़ना आसान हो जाता है।
CSS स्टाइल रूल्स के दो मुख्य भाग
CSS सिंटैक्स के दो सबसे महत्वपूर्ण भाग हैं सेलेक्टर्स (Selectors) और डिक्लेरेशन ब्लॉक्स (Declaration Blocks)।
- सेलेक्टर्स का उपयोग उन एलिमेंट्स को इंगित करने के लिए किया जाता है जिन पर आप स्टाइल लागू करना चाहते हैं।
- डिक्लेरेशन ब्लॉक्स उन स्टाइल्स को परिभाषित करते हैं जिन्हें आप सेलेक्ट किए गए एलिमेंट्स पर लागू करना चाहते हैं।
CSS स्टाइल रूल की संरचना
CSS में एक स्टाइलशीट नियमों का एक समूह स्टोर करती है जो निर्धारित करता है कि वेबसाइट यूज़र की स्क्रीन पर कैसे दिखाई देगी। उदाहरण के लिए, एक स्टाइलशीट वेब पेज पर टेक्स्ट के रंग या किसी विशेष हेडर द्वारा उपयोग किए जाने वाले फॉन्ट साइज़ को रेखांकित कर सकती है।
ये नियम एक स्टैंडर्ड संरचना का पालन करते हैं, जो दो भागों से बनी होती है: सेलेक्टर्स और डिक्लेरेशन्स। कुल मिलाकर, CSS में एक स्टाइल रूल इस तरह दिखाई देता है:
h1 { color: blue; }यह विशेष स्टाइल वेब पेज पर सभी <h1> एलिमेंट्स का रंग नीला सेट करता है। आइए इसे इसके दो घटक भागों में तोड़कर विश्लेषण करें कि यह कैसे काम करता है।
CSS डिक्लेरेशन्स (Declarations)
CSS स्टाइल का पहला भाग डिक्लेरेशन्स होते हैं। डिक्लेरेशन किसी विशेष स्टाइल के लिए दूसरा शब्द है जिसे आप वेब पेज पर किसी एलिमेंट पर लागू करना चाहते हैं।
एक CSS स्टाइल रूल में कम से कम एक डिक्लेरेशन होना चाहिए और इसमें जितने चाहें उतने डिक्लेरेशन शामिल हो सकते हैं। इसलिए, यदि आप वेब पेज पर किसी बॉक्स की चौड़ाई और ऊंचाई 100px सेट करना चाहते हैं, और उसका बैकग्राउंड रंग नीला सेट करना चाहते हैं, तो आप यह सब एक ही डिक्लेरेशन ब्लॉक में कर सकते हैं।
डिक्लेरेशन्स दो भागों से मिलकर बने होते हैं:
- प्रॉपर्टीज़ (Properties) - ये वे स्टाइल प्रॉपर्टीज़ हैं जिन्हें किसी एलिमेंट पर लागू किया जाना चाहिए (जैसे: color, background-color, width, height)।
- वैल्यू (Value) - यह भाग ब्राउज़र को बताता है कि प्रॉपर्टी को कैसे प्रदर्शित किया जाए (जैसे, बॉक्स का रंग "green" या "red" पर सेट किया जा सकता है)।
CSS डिक्लेरेशन का सिंटैक्स
property: value;ध्यान दें कि हमारा CSS प्रॉपर्टी पहले आता है, फिर कोलन (:) से अलग होता है। कोलन के बाद वह वैल्यू आती है जिसे हम परिभाषित प्रॉपर्टी को असाइन करना चाहते हैं।
प्रत्येक CSS डिक्लेरेशन सेमीकोलन (;) से समाप्त होना चाहिए।
उदाहरण: दो CSS डिक्लेरेशन्स
color: blue; font-size: 16px;पहला डिक्लेरेशन HTML एलिमेंट के फॉन्ट रंग को "blue" सेट करता है। दूसरा डिक्लेरेशन एक एलिमेंट के फॉन्ट साइज़ को "16px" सेट करता है। दोनों सेलेक्टर्स प्रॉपर्टी नाम से शुरू होते हैं और उसके बाद कोलन और वह वैल्यू आती है जिसे हम प्रॉपर्टी को असाइन करना चाहते हैं।
डिक्लेरेशन्स कर्ली ब्रैकेट्स { } के अंदर स्टोर किए जाते हैं।
CSS सेलेक्टर्स (Selectors)
पिछले सेक्शन में हमने चर्चा की कि डिक्लेरेशन्स का उपयोग वेब एलिमेंट पर स्टाइल लागू करने के लिए कैसे किया जाता है। लेकिन डिक्लेरेशन्स CSS सिंटैक्स का केवल एक भाग हैं। दूसरा भाग सेलेक्टर्स हैं, जो ब्राउज़र को बताते हैं कि डिक्लेरेशन्स का एक विशेष सेट किस एलिमेंट पर लागू होना चाहिए।
CSS सेलेक्टर का सिंटैक्स
selector {
/* डिक्लेरेशन्स की सूची */
}सेलेक्टर ब्राउज़र को निर्देश देता है कि स्टाइल्स का एक सेट किस एलिमेंट(ट्स) पर लागू होना चाहिए। उदाहरण के लिए, यदि हम सभी <div> एलिमेंट्स की चौड़ाई "500px" सेट करना चाहते हैं, तो हम इस नियम का उपयोग कर सकते हैं:
div { width: 500px; }इस मामले में div हमारा सेलेक्टर है और यह हमारे CSS नियम की शुरुआत में आता है। फिर, हम पहले चर्चा किए गए सिंटैक्स का उपयोग करके कर्ली ब्रैकेट्स में अपने डिक्लेरेशन्स को परिभाषित करते हैं। यह नियम वेब पेज पर सभी <div> एलिमेंट्स की चौड़ाई "500px" पर सेट करता है।
CSS कमेंट्स (Comments)
अब तक हमने चर्चा की है कि CSS में स्टाइल रूल्स कैसे लिखे जाते हैं। हालांकि, स्टाइलशीट में लिखा गया सारा टेक्स्ट स्टाइल रूल्स नहीं होता।
CSS स्टाइलशीट्स कमेंट्स स्टोर करने में भी सक्षम हैं। कमेंट्स डेवलपर द्वारा लिखे गए टेक्स्ट के ब्लॉक होते हैं जिनका उद्देश्य स्टाइलशीट में कोड को समझना आसान बनाना होता है। कमेंट्स ब्राउज़र द्वारा नज़रअंदाज़ किए जाते हैं, इसलिए आप स्टाइलशीट में जितने चाहें उतने कमेंट्स जोड़ सकते हैं।
कमेंट्स लिखने के फायदे
- कोड लिखते समय अपने कोड को ट्रैक रखने और भविष्य में संदर्भ के लिए अपने विचारों का रिकॉर्ड रखने में मदद मिलती है।
- ऐसे डेवलपर्स जो कोड के एक ब्लॉक को नहीं लिखे हैं, उन्हें उसका उद्देश्य और कोड लिखने के पीछे आपका इरादा समझने में मदद मिलती है।
CSS कमेंट सिंटैक्स
CSS कमेंट्स /* सिंटैक्स से शुरू होते हैं और */ सिंटैक्स से समाप्त होते हैं।
सिंगल-लाइन और मल्टी-लाइन कमेंट्स
CSS में दो प्रकार के कमेंट्स आ सकते हैं: सिंगल-लाइन और मल्टी-लाइन।
सिंगल-लाइन कमेंट्स
सिंगल-लाइन कमेंट्स वे कमेंट्स हैं जो स्टाइलशीट पर केवल एक लाइन तक फैले होते हैं। यहां एक स्टाइल रूल के ऊपर दिखाई देने वाले CSS सिंगल-लाइन कमेंट का उदाहरण है:
/* This style sets the font size of all <p> tags to 16px */
p { font-size: 16px; }इस कोड में, हमारा कमेंट /* और */ मार्कर्स के बीच दिखाई देता है। हमारे कमेंट के नीचे एक स्टाइल रूल है, जो पहले चर्चा किए गए सिंटैक्स का उपयोग करता है।
मल्टी-लाइन कमेंट्स
मल्टी-लाइन कमेंट्स वे कमेंट्स हैं जो स्टाइलशीट पर एक से अधिक लाइन तक फैले होते हैं। यहां CSS मल्टी-लाइन कमेंट का एक उदाहरण है:
/* This style sets the font size of all <p> tags to 16px
and also sets the color of the text to gray */
p { font-size: 16px; color: gray; }यह कमेंट दो लाइनों तक फैला हुआ है और एक CSS स्टाइल का वर्णन करता है।
निष्कर्ष
किसी भी प्रोग्रामिंग लैंग्वेज की तरह, CSS में कुछ बेसिक सिंटैक्स होता है जो परिभाषित करता है कि आप लैंग्वेज का उपयोग करके कोड कैसे लिख सकते हैं।
CSS में, दो घटक एक स्टाइल रूल बनाते हैं: डिक्लेरेशन्स और सेलेक्टर्स। डिक्लेरेशन्स वे स्टाइल्स हैं जिन्हें आप किसी एलिमेंट पर लागू करना चाहते हैं, और सेलेक्टर्स का उपयोग उन एलिमेंट्स को चुनने के लिए किया जाता है जिन पर आपके डिक्लेरेशन्स लागू होंगे।
इसके अलावा, CSS में एक कमेंटिंग फीचर है जो आपको भविष्य के संदर्भ के लिए अपने कोड पर नोट्स लिखने की अनुमति देता है। कमेंट्स ब्राउज़र द्वारा नज़रअंदाज़ किए जाते हैं।
इस ट्यूटोरियल में CSS सिंटैक्स की बुनियादी बातों और CSS स्टाइलशीट पर कमेंट कैसे करें, इस पर चर्चा की गई। अब आप एक प्रोफेशनल वेब डेवलपर की तरह CSS स्टाइल रूल्स और कमेंट्स लिखना शुरू करने के लिए तैयार हैं!
