Add Inline Style in HTML: Complete Guide with Syntax and Examples

Inline CSS क्या है?

Inline CSS वह CSS होती है जिसे HTML Element के अंदर style Attribute की सहायता से लिखा जाता है।

इसका उपयोग किसी एक विशेष (Single) HTML Element को Style देने के लिए किया जाता है।

Inline CSS का Syntax

<tag style="property: value;">
    Content
</tag>

उदाहरण 1 (Example)

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS Example</title>
</head>

<body>

<h1 style="color: blue;">Welcome to UICT</h1>

<p style="color: green;">This is Inline CSS Example.</p>

</body>
</html>

Output

  • Welcome to UICT का रंग Blue होगा।
  • Paragraph का रंग Green होगा।

उदाहरण 2 (Multiple CSS Properties)

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>

<body>

<h2 style="color:red; background-color:yellow; text-align:center;">
    Learn CSS
</h2>

</body>
</html>

Output

  • Text का रंग Red होगा।
  • Background Yellow होगी।
  • Text Center में दिखाई देगा।

Inline CSS कहाँ लिखी जाती है?

Inline CSS सीधे HTML Tag के अंदर style Attribute में लिखी जाती है।

<p style="color:blue;">
    Welcome Students
</p>

Inline CSS के फायदे (Advantages)

✔ केवल एक Element पर Style लागू होती है।

✔ छोटे बदलाव (Quick Styling) के लिए सबसे आसान तरीका है।

✔ अलग CSS File या <style> Tag की आवश्यकता नहीं होती।

✔ Beginners के लिए समझना आसान है।

✔ तुरंत परिणाम (Instant Result) दिखाई देता है।

Inline CSS के नुकसान (Disadvantages)

❌ केवल एक Element पर ही लागू होती है।

❌ Code बार-बार लिखना पड़ता है।

❌ HTML Code लंबा और कम व्यवस्थित हो जाता है।

❌ बड़े Projects के लिए उपयुक्त नहीं है।

❌ Website का Maintenance कठिन हो जाता है।

Inline CSS कब उपयोग करें?

  • किसी एक Element को Style देना हो।
  • Quick Testing करनी हो।
  • Practice और Learning के लिए।
  • छोटे Demo Projects में।
  • Temporary Styling के लिए।

Inline CSS, Internal CSS और External CSS में अंतर

Inline CSS Internal CSS External CSS
style Attribute में लिखी जाती है। <style> Tag में लिखी जाती है। अलग .css File में लिखी जाती है।
केवल एक Element पर लागू होती है। एक HTML Page पर लागू होती है। पूरी Website के कई Pages पर लागू होती है।
छोटे बदलाव के लिए उपयुक्त। Single Page के लिए उपयुक्त। बड़े Projects के लिए सबसे अच्छा विकल्प।
सबसे अधिक Priority होती है। Inline से कम Priority। तीनों में सबसे कम Priority।

याद रखने योग्य बातें

  • Inline CSS को HTML Tag के style Attribute में लिखा जाता है।
  • यह केवल एक Element पर प्रभाव डालती है।
  • इसमें CSS Properties को Semicolon (;) से अलग किया जाता है।
  • छोटे बदलाव और Practice के लिए यह सबसे आसान तरीका है।