HTML स्टाइल
आप पहले से पेज संरचना बना सकते हैं और पथों से अन्य फ़ाइलों की ओर इशारा कर सकते हैं। शुरुआती अगला सवाल पूछते हैं कि सामग्री कैसी दिखे उसे कैसे बदला जाए: टेक्स्ट रंग, पृष्ठभूमि और आकार। शुरुआती HTML अभ्यास में आप यह style attribute से कर सकते हैं। यह CSS विचारों का एक छोटा द्वार है — डेमो के लिए उपयोगी — जबकि पूरी साइट डिज़ाइन बाद में सही CSS में आपके सीखने के मार्ग पर चली जाएगी।
style attribute क्या है?
style attribute आपको CSS घोषणाएँ सीधे एक HTML तत्व के प्रारंभ टैग पर जोड़ने देता है। ब्राउज़र उन घोषणाओं को पढ़ता है और उसी तत्व को उसी के अनुसार रंगता है। आप शून्य से दूसरी भाषा नहीं गढ़ रहे: आप छोटे CSS नियम वहाँ लिख रहे हैं जहाँ HTML पहले से जगह देता है। इसलिए इनलाइन स्टाइल एक अच्छा शिक्षण उपकरण है, भले ही पेशेवर प्रोजेक्ट शायद ही सारा डिज़ाइन attributes के अंदर रखें।
सीधा उत्तर
दिखावट style="property: value;" से तत्व पर जोड़ें। शुरुआती गुणों में color (टेक्स्ट अग्रभूमि), background-color (सामग्री के पीछे का क्षेत्र) और font-size (टेक्स्ट आकार) शामिल हैं। पूरी सूची को उद्धरणों में रखें। कई घोषणाओं को सेमीकोलन से अलग करें। असली बहु-पेज साइटों के लिए CSS फ़ाइल या <style> ब्लॉक बेहतर है ताकि हर टैग पर वही लुक न दोहराएँ — पर इस पाठ में स्पष्ट इनलाइन घोषणाएँ पढ़ने और लिखने पर ध्यान दें।
गुण और मान, एक-एक करके
हर घोषणा में एक गुण (आप क्या बदलना चाहते हैं) और एक मान (कैसा दिखना चाहिए) होता है। उनके बीच कोलन होता है। शुरुआती को विशाल सूची याद करने से पहले कुछ गुण अच्छी तरह सीखने चाहिए।
प्रति पैराग्राफ एक गुण
html<p style="color: blue;">नीला टेक्स्ट</p>
<p style="background-color: lightyellow;">हल्का पीला पृष्ठभूमि</p>
<p style="font-size: 24px;">बड़ा टेक्स्ट</p>उदाहरण पढ़ना
color: blueकेवल उसी पैराग्राफ का टेक्स्ट रंग बदलता हैbackground-color: lightyellowटेक्स्ट के पीछे पृष्ठभूमि रंगता हैfont-size: 24pxटेक्स्ट आकार सेट करता है;pxशुरुआती इकाई आम है- हर पैराग्राफ का अपना
style="..."है ताकि तीन प्रभाव अलग और आसानी से दिखें - नाम वाले रंग जैसे
blueअभ्यास के लिए अच्छे हैं; बाद में#336699जैसे hex मान भी दिखेंगे
अगर ब्राउज़र में कुछ न बदले, तो फ़ाइल सहेजना, पेज रीफ़्रेश, और पूरे style मान के चारों ओर उद्धरण जाँचें।
एक attribute में कई घोषणाएँ
आप एक ही style attribute में घोषणाएँ मिला सकते हैं। सूची छोटी रखें ताकि HTML पढ़ने योग्य रहे। हर घोषणा सेमीकोलन से समाप्त करें — अंतिम भी ठीक है और बाद में संपादन पर अक्सर साफ़तर होता है।
मिलाई गई style घोषणाएँ
html<p style="color: navy; background-color: #f0f0f0; font-size: 18px;">
हल्के धूसर पृष्ठभूमि पर गहरा नीला टेक्स्ट
</p>यह पैटर्न क्यों मायने रखता है
- एक तत्व रंग, पृष्ठभूमि और आकार साथ ले जा सकता है
- सेमीकोलन घोषणाएँ अलग करता है ताकि ब्राउज़र हर जोड़ी पार्स कर सके
#f0f0f0एक hex रंग है; शुरुआती के लिए वैकल्पिक पर असली CSS में आम- पैराग्राफ के अंदर दिखने वाला वाक्य सामान्य HTML टेक्स्ट है; केवल
styleattribute दिखावट बदलता है
पहले दिन दस डिज़ाइन निर्णय एक attribute में न ठूंसें। पहले दो-तीन स्पष्ट गुणों से सिंटैक्स सीखें।
अलग-अलग तत्वों पर style
style attribute केवल p तक सीमित नहीं। शीर्षक, span और कई अन्य तत्व उसी तरह उपयोग कर सकते हैं। इससे दिखता है कि स्टाइल उसी तत्व का अनुसरण करता है जिससे आप उसे जोड़ते हैं — कोई जादुई वैश्विक स्विच नहीं।
शीर्षक और पैराग्राफ के साथ style
html<h1 style="color: darkgreen;">बाग की टिप्पणियाँ</h1>
<p style="color: #333333;">गहरे धूसर में साधारण मुख्य टेक्स्ट।</p>
<p style="background-color: honeydew; font-size: 20px;">मुलायम हरे पृष्ठभूमि वाला हाइलाइट सुझाव।</p>क्या देखें
h1का रंग पैराग्राफों को स्वतः फिर से स्टाइल नहीं करता- दूसरा पैराग्राफ पृष्ठभूमि और फ़ॉन्ट आकार मिलाता है
- इनलाइन स्टाइल स्थानीय है: वह उसी तत्व पर असर डालता है (और सामान्य CSS नियमों से बच्चों को भी प्रभावित कर सकता है — अभी डेमो सरल रखें)
अभी इनलाइन style, बाद में CSS
इनलाइन style प्रयोगों के लिए तेज़ है। जब बीस पेजों को वही गहरा नीला शीर्षक रंग चाहिए और आपको बीस attributes संपादित करने हों तो दर्द होता है। साझा CSS — दस्तावेज़ हेड में <style> ब्लॉक, या बाहरी .css फ़ाइल — दिखावट एक जगह रखता है। इस पाठ्यक्रम में आगे समर्पित CSS सीखना है। इस HTML सत्र में आपका काम property:value विचार समझना और कुछ सही इनलाइन उदाहरण लिखना है, इनलाइन स्टाइल को पूरी वेबसाइट की अंतिम वास्तुकला न मानना।
अपने संपादक में अभ्यास
- एक
h1और तीन छोटे पैराग्राफ वाला पेज बनाएँ। - पहले पैराग्राफ को टेक्स्ट
colorदें। - दूसरे को
background-colorदें। - तीसरे को
colorऔरfont-sizeका संयोजन दें। - वैकल्पिक:
h1को अपनेstyleसे रंगें। - सहेजें और रीफ़्रेश करें। पुष्टि करें कि हर ब्लॉक अलग दिखे।
- जानबूझकर एक उदाहरण तोड़ें (उद्धरण या
pxहटाएँ), रीफ़्रेश करें, असफलता देखें, फिर ठीक करें।
असफल style पर काम करना केवल सही नमूने कॉपी करने से तेज़ उद्धरण और इकाइयाँ सिखाता है।
गलतियाँ जो आपकी शैलियाँ छिपाती हैं
- मान के चारों ओर उद्धरण भूलना:
style=color:redसामान्य HTML attribute लेखन में अमान्य है color(टेक्स्ट) कोbackground-color(टेक्स्ट के पीछे) से मिलाना और सोचना «रंग ने कुछ नहीं किया»- जहाँ आकार को इकाई चाहिए वहाँ इकाई छोड़ना (
font-size: 24के बजाय कई शुरुआती मामलों में24px) - शब्द-संसाधक जो सीधा उद्धरण attributes में घुमावदार उद्धरण से बदल दे
- साझा CSS अगला सीखने के बजाय पूरे पेज डिज़ाइन को इनलाइन शैलियों में ठूंसना
- फ़ाइल बदलना पर रीफ़्रेश से पहले सहेजना भूलना — ब्राउज़र अभी भी पुराना संस्करण दिखाता है
सारांश
styleattribute एक HTML तत्व पर CSS घोषणाएँ जोड़ता हैproperty: value;लिखें और पूरी सूची उद्धरणों में रखें- शुरुआती गुण:
color,background-color,font-size - कुछ घोषणाएँ सेमीकोलन से मिलाएँ; डेमो छोटे और पढ़ने योग्य रखें
- इनलाइन स्टाइल सीखने और छोटे प्रयोगों के लिए उत्कृष्ट है, पूरी साइट डिज़ाइन बनाए रखने के लिए नहीं
- साझा CSS सीखने के मार्ग पर तब आता है जब आप दिखावट एक जगह नियंत्रित करना चाहें
- हमेशा सहेजना + रीफ़्रेश से जाँचें, और जब शैलियाँ «रहस्यमय ढंग से» असफल हों तो उद्धरण और इकाइयाँ देखें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी