कैस्केडिंग स्टाइल शीट (सीएसएस) वेबसाइट कोडिंग के लिए एक प्रणाली है जो डिजाइनरों को समूहों को कुछ तत्व निर्दिष्ट करके एक साथ कई विशेषताओं में हेरफेर करने की अनुमति देती है। उदाहरण के लिए, वेबसाइट पृष्ठभूमि के लिए एक कोड का उपयोग करके, डिज़ाइनर वेबसाइट के सभी पृष्ठों पर सीएसएस फ़ाइल में एक परिवर्तन के साथ पृष्ठभूमि का रंग या छवि बदल सकते हैं। यहां एक बुनियादी वेबसाइट के लिए CSS बनाने का तरीका बताया गया है।
कदम
भाग 1 का 4: इनलाइन सीएसएस लिखना
चरण 1. सुनिश्चित करें कि आपको HTML टैग्स की बुनियादी समझ है।
आपको पता होना चाहिए कि टैग कैसे काम करते हैं और
एसआरसी
तथा
href
गुण।
चरण 2. कुछ बुनियादी सीएसएस गुणों को जानें।
आप पाएंगे कि बहुत सारी संपत्तियां हैं। हालांकि, उन सभी को सीखना जरूरी नहीं है।
-
जानने के लिए कुछ अच्छे बुनियादी सीएसएस गुण हैं:
रंग
तथा
फ़ॉन्ट परिवार
- .
चरण 3. प्रत्येक संबंधित संपत्ति के मूल्यों के बारे में जानें।
सभी संपत्तियों को एक मूल्य की आवश्यकता होती है। के लिए
रंग
संपत्ति, उदाहरण के लिए, आप डाल सकते हैं
लाल
मूल्य।
चरण 4. के बारे में जानें
अंदाज
एचटीएमएल विशेषता।
इसका उपयोग एक तत्व के भीतर किया जाता है जैसे
href
या
एसआरसी
. इसका उपयोग करने के लिए, समान चिह्न के बाद उद्धरण चिह्नों के भीतर, CSS विशेषता, एक कोलन, और फिर संपत्ति का मान डालें। इसे CSS नियम के रूप में जाना जाता है।
चरण 5. समझें कि इनलाइन सीएसएस आमतौर पर पेशेवर वेब डेवलपर्स द्वारा वेबसाइटों के लिए उपयोग नहीं किया जाता है।
इनलाइन सीएसएस एक HTML दस्तावेज़ में अनावश्यक अव्यवस्था जोड़ सकता है। हालांकि, सीएसएस के काम करने के तरीके से परिचित होने का यह एक शानदार तरीका है।
4 का भाग 2: बेसिक सीएसएस लिखना
चरण 1. उस प्रोग्राम को लॉन्च करें जिसका आप उपयोग करना चाहते हैं।
यह आपको HTML और CSS फाइलें बनाने की अनुमति देनी चाहिए।
यदि आपके पास कोई विशेष प्रोग्राम इंस्टॉल नहीं है, तो आप नोटपैड या किसी अन्य टेक्स्ट एडिटर का उपयोग कर सकते हैं। बस अपनी फ़ाइल को टेक्स्ट फ़ाइल और CSS फ़ाइल दोनों के रूप में सहेजें।
चरण 2. अपनी वेबसाइट के लिए HTML फ़ाइल खोलें।
यदि आपने एक स्थापित किया है, तो आपको इसे एक HTML संपादक के साथ भी खोलना चाहिए।
HTML संपादक आपको एक ही समय में HTML और CSS को संपादित करने की अनुमति देते हैं।
चरण 3. अपने एचटीएमएल हेड के भीतर एक टैग बनाएं।
यह आपको एक अलग फ़ाइल की आवश्यकता के बिना CSS लिखने देगा।
चरण 4। एक तत्व चुनें जिसमें आप स्टाइल जोड़ना चाहते हैं और तत्व का नाम टाइप करें जिसके बाद घुंघराले ब्रेसिज़ ({}) का एक सेट है।
अपने कोड को अधिक सुपाठ्य बनाने के लिए, हमेशा दूसरा कर्ली ब्रेस अपनी लाइन पर लगाएं।
चरण 5. ब्रेसिज़ के बीच, अपने सीएसएस नियम टाइप करें जैसे आप का उपयोग करेंगे
अंदाज
गुण।
प्रत्येक पंक्ति अर्धविराम (;) के साथ समाप्त होनी चाहिए। अपने कोड को सुपाठ्य बनाने के लिए, प्रत्येक नियम को अपनी लाइन से शुरू करना चाहिए और प्रत्येक पंक्ति को इंडेंट किया जाना चाहिए।
यह नोट करना बहुत महत्वपूर्ण है कि यह शैली पृष्ठ पर चयनित प्रकार के सभी तत्वों को प्रभावित करेगी। अगले भाग में अधिक विशिष्ट स्टाइल को शामिल किया जाएगा।
भाग ३ का ४: अधिक उन्नत सीएसएस
चरण 1. एक सीएसएस फ़ाइल बनाएँ, न कि एक HTML फ़ाइल और इसका उपयोग करके इसे सहेजें
सीएसएस
विस्तार।
अपनी एचटीएमएल फाइल भी खोलें।
चरण 2. अपने एचटीएमएल हेड में एक टैग बनाएं।
यह आपको एक अलग CSS फ़ाइल को अपने HTML दस्तावेज़ से लिंक करने की अनुमति देगा। आपके लिंक टैग को तीन विशेषताओं की आवश्यकता है:
रेले
प्रकार
तथा
href
-
रेले
का अर्थ है "रिलेशनशिप" और ब्राउज़र को बताता है कि HTML दस्तावेज़ से क्या संबंध है। यहाँ इसका मान होना चाहिए
"शैली पत्रक"
- .
-
प्रकार
यह बताता है कि किस प्रकार के मीडिया को जोड़ा जा रहा है। यहाँ इसका मान होना चाहिए
"पाठ/सीएसएस"
-
href
- यहां का उपयोग उसी तरह किया जाता है जैसे किसी तत्व में इसका उपयोग किया जाता है, लेकिन यहां इसे एक सीएसएस फ़ाइल से लिंक करना होगा। यदि CSS फ़ाइल HTML फ़ाइल के समान फ़ोल्डर में स्थित है, तो केवल फ़ाइल नाम को उद्धरण चिह्नों के भीतर लिखा जाना चाहिए।
चरण 3. विभिन्न प्रकार के तत्वों का चयन करें जिनमें आप समान स्टाइल जोड़ना चाहते हैं।
एक जोड़ें
कक्षा
इन तत्वों को विशेषता दें और उन्हें अपनी पसंद के वर्ग नाम के बराबर सेट करें। यह आपके तत्वों को समान स्टाइल देगा।
चरण 4. असाइन करें कि किसी वर्ग को कौन-सी शैली प्राप्त होगी।
अपनी CSS फ़ाइल में कक्षा का नाम उसके पहले की अवधि (.) के साथ टाइप करें (अर्थात।
।कक्षा
).
चरण 5. एकल तत्वों का चयन करें जिसमें आप विशेष स्टाइल जोड़ना चाहते हैं और एक जोड़ें
पहचान
गुण।
सीएसएस में आईडी एक अवधि के बजाय पाउंड चिह्न (#) का उपयोग करके बनाई जाती हैं।
आईडी कक्षाओं की तुलना में अधिक विशिष्ट हैं, इसलिए एक आईडी किसी भी वर्ग स्टाइल को ओवरराइड कर देगी यदि उसके पास कक्षा की तुलना में एक अलग मूल्य के साथ एक विशेषता है।
भाग 4 का 4: अधिक सीखना
चरण 1. w3 स्कूलों पर जाएँ।
यह वेब विकास कौशल सिखाने के उद्देश्य से एक आधिकारिक वेबसाइट है। W3 में HTML और CSS के साथ-साथ अन्य वेब भाषाओं के लिए बहुत सारे संदर्भ सूचीबद्ध हैं।
चरण 2. विशेष रूप से HTML और CSS सीखने और सिखाने के उद्देश्य से अन्य साइटें खोजें।
CSS Tricks.com जैसी साइटें विशेष रूप से CSS और वेब डिज़ाइन कौशल सिखाने के उद्देश्य से हैं। प्रतिष्ठित स्रोत खोजने से आपको अपनी सीखने की यात्रा में मदद मिलेगी।
चरण 3. वेब डिजाइनरों और डेवलपर्स के संपर्क में रहें।
उनका अनुभव और ज्ञान आपको बहुमूल्य ज्ञान और कौशल सिखा सकता है।
चरण 4. आपके सामने आने वाली वेबसाइटों का स्रोत कोड देखें।
अच्छी तरह से विकसित वेबसाइटों के सीएसएस को देखने से आप वेबसाइटों के कुछ हिस्सों को डिजाइन करने के तरीके दिखा सकते हैं। इसे अभ्यास के रूप में कॉपी करना और कोड के साथ तालमेल बिठाने से आपको विभिन्न CSS विशेषताओं का उपयोग करने का तरीका सीखने में मदद मिल सकती है।
