नोटपैड का उपयोग करके एक साधारण सीएसएस स्टाइलशीट कैसे बनाएं

Thisteaches आप HTML और CSS में लिखे गए वेबपृष्ठ के लिए जानकारी स्टोर करने के लिए Windows `Notepad ऐप का उपयोग कैसे करें. एचटीएमएल प्रोग्रामिंग भाषा है जो आपके वेबपृष्ठ को बनाने के लिए उपयोग की जाती है, जबकि सीएसएस वह भाषा है जो वेबपृष्ठ पर एचटीएमएल तत्वों के स्टाइल-रंग, फ़ॉन्ट और अन्य पर निर्धारित करती है.

कदम

3 का भाग 1:

एक HTML पेज बनाना

1. खुला नोटपैड. खुला हुआ शुरू

, में टाइप करें नोटपैड, और नीले रंग पर क्लिक करें नोटपैड स्टार्ट विंडो के शीर्ष पर ऐप.

शीर्षक वाली छवि नोटपैड चरण 2 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

2. दस्तावेज़ प्रकार इंगित करें. प्रकार नोटपैड में, फिर एक नई लाइन शुरू करने के लिए ↵ दर्ज करें दबाएं.

शीर्षक वाली छवि नोटपैड चरण 3 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

3. HTML टैग जोड़ें. टाइप करें और ↵ दर्ज करें दबाएं.

नोटपैड चरण 4 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

4. शरीर टैग दर्ज करें. टाइप करें और ↵ दर्ज करें दबाएं. अब आप अपनी वेबपृष्ठ की जानकारी दर्ज करना शुरू कर सकते हैं.

शीर्षक वाली छवि नोटपैड चरण 5 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

5. एक शीर्षलेख जोड़ें. में टाइप करें पाठ, प्रतिस्थापित करना सुनिश्चित करना "पाठ" अपने पसंदीदा पृष्ठ शीर्षक के साथ, और ↵ दर्ज करें दबाएं.

उदाहरण के लिए, एक पृष्ठ शीर्षलेख बनाने के लिए जो कहता है "स्वागत हे!", आप टाइप करेंगे स्वागत हे! नोटपैड में.

नोटपैड चरण 6 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

6. शीर्षलेख के नीचे पाठ जोड़ें. में टाइप करें पाठ, प्रतिस्थापित करना सुनिश्चित करना "पाठ" अपने पसंदीदा संदेश के साथ, और प्रेस ↵ दर्ज करें.

उदाहरण के लिए, पाठ जोड़ने के लिए जो कहता है "मैं एक इगुआना हूं", आप प्रवेश करेंगे मैं एक इगुआना हूं नोटपैड में.

नोटपैड चरण 7 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

7. अधिक हेडर और पैराग्राफ जोड़ें. प्रत्येक बाद के शीर्षलेख और अनुच्छेद में एक आरोही संख्या लागू होनी चाहिए- उदाहरण के लिए, आपके दूसरे शीर्षलेख में इसके चारों ओर टैग होंगे, और दूसरे पैराग्राफ में टैग होंगे.

सुनिश्चित करें कि आप कोड की प्रत्येक पंक्ति के बाद ↵ दर्ज करना जारी रखते हैं.

नोटपैड चरण 8 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

8. शरीर और HTML टैग बंद करें. एक बार जब आप कोड की अपनी अंतिम पंक्ति दर्ज कर लें, तो अपनी लाइन पर टाइप करें और ↵ Enter दबाएं, फिर टाइप करें . आपका दस्तावेज़ अब सीएसएस के साथ स्टाइल करने के लिए तैयार है.

3 का भाग 2:

सीएसएस जोड़ना

1. समझें कि सीएसएस कैसे काम करता है. आप एक HTML तत्व (ई) की उपस्थिति को बदलने के लिए सीएसएस का उपयोग करते हैं.जी., एक पैरा). सीएसएस आमतौर पर निम्नलिखित लाइन-लाइन-लाइन प्रारूप में लिखा जाता है:

तत्व टैग { (उदाहरण के लिए, पी {)
संशोधक: संपत्ति- (उदाहरण के लिए, फ़ॉन्ट आकार: 20px-)
संशोधक: संपत्ति- (उदाहरण के लिए, रंग काला-)
}

नोटपैड चरण 10 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

2. के बीच एक स्थान रखें और टैग. ये पृष्ठ के शीर्ष के पास होना चाहिए.

नोटपैड चरण 11 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

3. एक सिर टैग दर्ज करें. टाइप करें और ↵ दर्ज करें दबाएं.

शीर्षक वाली छवि नोटपैड चरण 12 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

4. एक शैली टैग जोड़ें. टाइप करें और ↵ दर्ज करें दबाएं.

शीर्षक वाली छवि नोटपैड चरण 13 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

5. अपने वेबपृष्ठ की पृष्ठभूमि रंग बदलें. ऐसा करने के लिए:

में टाइप करें तन { और प्रेस ↵ दर्ज करें.

में टाइप करें पृष्ठभूमि रंग: लाइटब्लू- और प्रेस ↵ दर्ज करें.

आप यहां किसी भी समर्थित रंग का उपयोग कर सकते हैं, साथ ही साथ "रोशनी" या "अंधेरा" संशोधक.

टाइप करें} और ↵ Enter दबाएं.

नोटपैड चरण 14 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

6. अपना पहला हेडर स्टाइल करें. में टाइप करें H1 { और ↵ दर्ज करें, एक संशोधक जोड़ें और ↵ Enter दबाएं, और टाइप करें} दबाएं और ↵ दर्ज करें दबाएं. जब तक प्रत्येक संशोधक अपनी लाइन पर है, तब तक आप एक तत्व में एकाधिक संशोधक जोड़ सकते हैं. सामान्य संशोधक में निम्नलिखित शामिल हैं:

टेक्स्ट का साइज़ - में टाइप करें फ़ॉन्ट आकार: 30 पीएक्स- 30-पॉइंट फ़ॉन्ट के रूप में अपना टेक्स्ट सेट करने के लिए. किसी भी संख्या का उपयोग करें जिसे आप उपयोग करना चाहते हैं.

पाठ का रंग - में टाइप करें रंग काला- काला पाठ बनाने के लिए. आप जिस रंग का उपयोग करना चाहते हैं उसे बदल दें.

पाठ्य संरेखण - में टाइप करें पाठ-संरेखण: केंद्र- पाठ को केन्द्रित करने के लिए. आप भी टाइप कर सकते हैं बाएं या सही पाठ को उचित रूप से संरेखित करने के लिए.

फ़ॉन्ट का इस्तेमाल किया - में टाइप करें फ़ॉन्ट-परिवार: टाइम्स न्यू रोमन- टाइम्स न्यू रोमन के रूप में अपना फ़ॉन्ट सेट करने के लिए. आप जैसे फोंट का भी उपयोग कर सकते हैं वर्दाना या जॉर्जिया.

शीर्षक वाली छवि नोटपैड चरण 15 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

7. अपना पहला पैराग्राफ स्टाइल करें. में टाइप करें P1 { और ↵ दर्ज करें, एक संशोधक जोड़ें और ↵ Enter दबाएं, और टाइप करें} दबाएं और ↵ दर्ज करें दबाएं.

आपके द्वारा उपयोग किए जा सकने वाले संशोधक हेडर के लिए उपयोग किए जाने वाले लोगों के समान हैं.

शीर्षक वाली छवि नोटपैड चरण 16 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

8. अपने दस्तावेज़ के बाकी हिस्सों को स्टाइल करें. आप किसी भी तत्व को अपने टैग टेक्स्ट का संदर्भ देकर और एक खुले घुंघराले ब्रैकेट ({) रखकर, संशोधक जोड़कर, और फिर ब्रैकेट को बंद कर सकते हैं (}).

शीर्षक वाली छवि नोटपैड चरण 17 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

9. शैली और सिर टैग बंद करें. अपने अंतिम स्टाइल टेक्स्ट के नीचे एक नई लाइन पर, टाइप करें और Enter दबाएं, फिर टाइप करें और दबाएं ↵ दर्ज करें. आपकी CSS शीट पूरी हो गई है, जिसका अर्थ है कि अब आप इसकी समीक्षा और इसे सहेज सकते हैं.

3 का भाग 3:

दस्तावेज़ को सहेजना

1. अपने CSS STYLESHEET की समीक्षा करें. आपका सीएसएस दस्तावेज़ थोड़ा अलग होगा, लेकिन यह इस तरह कुछ दिखना चाहिए:

तन {
पृष्ठभूमि रंग: लाइटब्लू-
}
H1 {
फ़ॉन्ट आकार: 45px-
}
P1 {
रंग काला-
}
नमस्ते!
मैं एक इगुआना हूं

नोटपैड चरण 19 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

2. क्लिक फ़ाइल. यह नोटपैड विंडो के ऊपरी-बाएँ कोने में है. एक ड्रॉप-डाउन मेनू दिखाई देगा.

शीर्षक वाली छवि नोटपैड चरण 20 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

3. क्लिक के रूप रक्षित करें…. आप इसे ड्रॉप-डाउन मेनू के नीचे देखेंगे. इसे क्लिक करने से एक विंडो को खोलने के लिए संकेत मिलता है.

शीर्षक वाली छवि नोटपैड चरण 21 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

4. एक सहेजें स्थान का चयन करें. एक फ़ोल्डर पर क्लिक करें (ई.जी., डेस्कटॉप) खिड़की के बाईं ओर.

शीर्षक वाली छवि नोटपैड चरण 22 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

5. दबाएं "टाइप के रुप में सहेजें" ड्रॉप डाउन बॉक्स. एक ड्रॉप-डाउन मेनू दिखाई देगा.

शीर्षक वाली छवि नोटपैड चरण 23 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं

6. क्लिक सारे दस्तावेज. यह ड्रॉप-डाउन मेनू में है.

नोटपैड चरण 24 का उपयोग करके एक साधारण सीएसएस स्टाइलशीट बनाएं शीर्षक

7. एक के साथ अपनी फ़ाइल का नाम दें ".एचटीएमएल" एक्सटेंशन. में "फ़ाइल का नाम" टेक्स्ट फ़ील्ड, अपने पसंदीदा दस्तावेज़ नाम (ई) में टाइप करें.जी., "मेरे सीएसएस") के बाद .एचटीएमएल.

उदाहरण के लिए, यदि आपने अपनी फ़ाइल का नाम दिया है "मेरे सीएसएस", आप टाइप करेंगे मेरे सीएसएस.एचटीएमएल क्षेत्र में.

यदि आप एक प्रोग्राम का उपयोग करते हैं जो चल सकता है ".सीएसएस" फ़ाइलें, आप उपयोग कर सकते हैं .सीएसएस की बजाय .एचटीएमएल यहां.

शीर्षक वाली छवि नोटपैड चरण 25 का उपयोग कर एक साधारण सीएसएस स्टाइलशीट बनाएं

8. क्लिक सहेजें. यह नीचे के दाहिने तरफ है "के रूप रक्षित करें" खिड़की. यह आपकी सीएसएस शीट को निष्पादन योग्य प्रारूप में सहेज लेगा, जिसका अर्थ है कि आप इसे नोटपैड के बजाय अपने पसंदीदा ब्राउज़र या HTML संपादक में खोल सकते हैं.

टिप्स

जब एचटीएमएल या सीएसएस में कोडिंग करते समय, यह वास्तव में कोई फर्क नहीं पड़ता कि कोड की रेखाओं के बीच कितने रिक्त स्थान हैं- आप प्रोग्राम के फ़ंक्शन को बदले बिना प्रत्येक पंक्ति के बाद कई बार दर्ज कर सकते हैं.

तत्वों को आसान बनाने के लिए अपने सीएसएस स्टाइलशीट के विभिन्न हिस्सों को इंडेंट करने का प्रयास करें. उदाहरण के लिए, आप एक बार और पैरा कोड दो बार हेडर कोड इंडेंट कर सकते हैं.