HTML Styles

HTML में “style” का मतलब होता है — किसी element की appearance (दिखावट) बदलना। जैसे कि आप किसी टेक्स्ट का रंग बदल सकते हैं, उसका साइज बढ़ा सकते हैं, बैकग्राउंड बदल सकते हैं या उसे सेंटर में ला सकते हैं। आप HTML में “style” को दो तरह से लगा सकते हैं:

Inline Style — सीधे HTML टैग में
Internal या External CSS — अलग से <style> टैग या CSS फाइल में

इस लेसन में हम अभी Inline Style पर फोकस करेंगे, क्योंकि यह HTML का बेसिक हिस्सा है।

Syntax (लिखने का तरीका)

<tagname style="property:value;">

tagname → HTML element का नाम (जैसे <p>, <h1>, <div>)
property → CSS property (जैसे color, font-size, background-color)
value → उस property की value (जैसे red, 20px, center)

Example 1: टेक्स्ट का रंग बदलना

<p style="color: red;">यह पैराग्राफ लाल रंग में है।</p>

Output:

यह पैराग्राफ लाल रंग में है।

Example 2: बैकग्राउंड और फॉन्ट बदलना

<p style="background-color: lightyellow; color: blue; font-size: 20px;">
यह पैराग्राफ नीले रंग में है और इसका बैकग्राउंड हल्का पीला है।
</p>

Output

यह पैराग्राफ नीले रंग में है और इसका बैकग्राउंड हल्का पीला है।

Explanation:

background-color → बैकग्राउंड का रंग
color → टेक्स्ट का रंग
font-size → फॉन्ट का साइज

Example 3: टेक्स्ट को सेंटर करना

<h2 style="text-align: center;">Welcome to My Website </h2>

Output : यह कोड “Welcome to My Website” को पेज के बीचोंबीच दिखाएगा।

Welcome to My Website

Example 4: Multiple Styles एक साथ

आप कई styles एक ही टैग में सेमीकोलन (;) से जोड़कर लगा सकते हैं:

<p style="color: white; background-color: black; font-size: 18px; text-align: center;"> यह स्टाइलिश पैराग्राफ है! 
</p>

Common Style Properties (जो सबसे ज्यादा काम आती हैं)

Property (प्रॉपर्टी)	Description (विवरण)	Example (उदाहरण)
`color`	टेक्स्ट का रंग	`color: red;`
`background-color`	बैकग्राउंड रंग	`background-color: yellow;`
`font-size`	फॉन्ट साइज	`font-size: 22px;`
`font-family`	फॉन्ट का नाम	`font-family: Arial;`
`text-align`	टेक्स्ट की alignment	`text-align: center;`
`border`	बॉर्डर जोड़ने के लिए	`border: 2px solid green;`
`padding`	टेक्स्ट के अंदर spacing	`padding: 10px;`
`margin`	बाहर की spacing	`margin: 20px;`

Example 5: बॉर्डर और स्पेसिंग लगाना

<div style="border: 2px solid blue; padding: 10px; margin: 15px;">
यह एक डिव बॉक्स है जिसमें बॉर्डर और पैडिंग है।
</div>

Output - यह बॉक्स चारों तरफ से नीली लाइन के साथ बनेगा और अंदर-बाहर स्पेस रहेगा।

यह एक डिव बॉक्स है जिसमें बॉर्डर और पैडिंग है।

Example 6: Heading को Design करना

<h1 style="color: darkgreen; font-family: 'Segoe UI'; text-shadow: 1px 1px 2px gray;"> HTML Styles Example </h1>

Output : - यह एक शानदार heading बनाएगा जिसमें हरे रंग और हल्का shadow effect होगा।

HTML Styles Example

Tip: Styles क्यों जरूरी हैं?

HTML सिर्फ स्ट्रक्चर बनाता है, लेकिन स्टाइल्स आपके पेज को प्रेजेंटेबल बनाते हैं। अगर आप वेबसाइट बनाना चाहते हैं जो यूज़र को अच्छी लगे, तो आपको HTML के साथ CSS (Cascading Style Sheets) सीखनी ही होगी।