HTML STYLES

मित्रों इस लेसन में HTML styles attribute के बारे में जानेंगे और लाइव व्यू भी देखेंगे. तो चलिए शुरुआत करते हैं.

HTML स्टाइल का प्रयोग एलिमेंट कंटेंट को अच्छा दिखाने के लिए किया जाता है. वैसे आजकल CSS style का प्रयोग किया जाता है जिसे हम CSS Tutorial में पढेंगे. चलिए पहले एक example देखते हैं जिससे जिससे थोड़ी सी जानकारी मिल जाएगी.

Example:

यह हेडिंग हरा और बोल्ड है.
यह पैराग्राफ नीला है
यह पैराग्राफ हेडिंग से भी बड़ा है.

कोशिश करें

HTML Style Attribute:

HTML एलिमेंट को आकर्षक बनाने के लिए निचे लिखे syntax का प्रयोग करते हैं:

<tagname style="property:value;">

 

यहाँ property css property है और value css value है.

Background Color:

बैकग्राउंड कलर के लिए background-color property का प्रयोग किया जाता है. हम किसी भी रंग का बैकग्राउंड बना सकते हैं. Example:

<body style="background-color:lightgrey;">

 <h1>यह हेडिंग है.</h1>
 <p>यह पैराग्राफ है.</p>

</body>

कोशिश करें

Text Color:

HTML एलिमेंट के टेक्स्ट को रंगीन करने के लिए color property प्रयोग किया जाता है:

 <h1 style="color:blue;">Welcome to the originclasses.com</h1>
 <p style="color:pink;">This is originclasses.com</p>

कोशिश करें

Fonts:

HTML element में मनचाहा फॉण्ट के लिए font-family property का प्रयोग किया जाता है:

 <h1 style="font-family:verdana;">Welcome to the originclasses.com</h1>
 <p style="font-family:courier;">This is originclasses.com</p>

कोशिश करें

Text Size

text size बदलने के लिए font-size property का प्रयोग करें:

 <h1 style="font-size:300%;">Welcome to the originclasses.com</h1>
 <p style="font-size:160%;">This is originclasses.com</p>

कोशिश करें

Text Alignment

किसी HTML एलिमेंट के  टेक्स्ट को right, center या left में रखना हो  तो The text-align property का प्रयोग करें:

 <h1 style="text-align:center;">Heading at center</h1>
 <p style="text-align:left;">Paragraph in left.</p>

कोशिश करें

Chapter Summary

  • हमने style attribute का प्रयोग करना सीखा.
  • हमनें background-color property का  प्रयोग करना सीखा.
  • हमने टेक्स्ट को रंग देने के लिए  color property का प्रयोग करना सीखा.
  • हमने टेक्स्ट लिए  font-family का प्रयोग करना सीखा.
  • हमने टेक्स्ट के साइज़ लिए  font-size का प्रयोग करना सीखा.
  • हमने टेक्स्ट alignment लिए text-align का प्रयोग करना सीखा.

मित्रों अगर आपको tutorial अच्छा लग रहा हो तो शेयर जरुर कीजियेगा. मिलते हैं अगले लेसन में तब तक के लिए आज्ञा चाहता हूँ धन्यवाद!

Pradeep Karn

Leave a Reply

Your email address will not be published. Required fields are marked *