CSS How To

CSS को किसी page में जोड़ने का सिर्फ एक तरीका नहीं है, तीन तरीके हैं: inline, internal, और external। हर एक आपकी CSS को अलग जगह रखता है, और हर एक का अपना best use case है। Inline CSS सीधे किसी एक HTML element पर रहता है। Internal CSS page के head में किसी style tag के अंदर रहता है, जो उस एक page को असर करता है। External CSS अपनी अलग .css file में रहता है, जिसे आप जितने चाहें उतने pages में link कर सकते हैं। यह जानना कि हर method कब इस्तेमाल करना है एक practical skill है: एक quick one-off tweak के लिए inline CSS इस्तेमाल हो सकता है, जबकि cookiescursor.com जैसी पूरी site लगभग हमेशा एक shared external stylesheet पर निर्भर करती है।

In this page:

Inline CSS
Internal CSS
External CSS
Methods के बीच Precedence का Order
सही Method चुनना

Inline CSS

Inline CSS सीधे किसी element के style attribute के अंदर लिखा जाता है, जो सिर्फ उसी एक specific element पर लागू होता है, कहीं और नहीं। क्योंकि यह internal और external दोनों CSS को override कर देता है, inline styles को आमतौर पर quick tests या dynamically generated styles को छोड़कर हतोत्साहित किया जाता है।

Note: Inline CSS quick experiments या one-off tweaks के लिए काम का है, लेकिन यह पूरी site पर अच्छी तरह scale नहीं करता।

Warning: Inline styles default रूप से लगभग बाकी सब कुछ override कर देते हैं, जो bugs को confusing बना सकता है अगर आप भूल जाएँ कि एक चुपचाप मौजूद है।

उदाहरण: Inline CSS

css

<p style="color: red;">Styled with an inline style attribute</p>

Internal CSS

Internal CSS page के head में रखे गए एक style tag के अंदर लिखा जाता है। यह सिर्फ उसी एक HTML document पर लागू होता है, site के किसी और page पर नहीं। यह approach छोटे, single-page projects के लिए सुविधाजनक है लेकिन site के कई pages में बढ़ने पर maintain करना मुश्किल हो जाता है।

Note: Internal CSS एक one-off landing page के लिए अच्छा fit है जिसे site के बाकी हिस्से के साथ styles share करने की ज़रूरत नहीं है।

Warning: Internal CSS को हर उस page पर repeat करना पड़ता है जिसे इसकी ज़रूरत है, जो एक multi-page site पर repetitive हो जाता है और consistent रखना मुश्किल।

उदाहरण: Internal CSS

css

<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p>Blue text from the internal style block.</p>
</body>

External CSS

External CSS अपनी .css file में रहता है, किसी भी HTML page से पूरी तरह अलग, और इसे एक link tag का इस्तेमाल करके जोड़ा जाता है। जो भी page इसे link करता है वह बिल्कुल वही styles share करता है।

यह असली projects के लिए recommended approach है क्योंकि यह styling को पूरी site में centralized, cacheable, और reusable बनाए रखता है।

Note: किसी भी असली, multi-page site के लिए, एक external stylesheet लगभग हमेशा सही choice है, क्योंकि एक ही file पूरी site को style कर देती है।

Warning: अगर link tag में href path गलत है, तो browser चुपचाप stylesheet load करने में fail हो जाता है, और page unstyled render होता है।

उदाहरण: External CSS

css

<link rel="stylesheet" href="styles.css">
<p>Styled by a separate .css file</p>

Methods के बीच Precedence का Order

जब एक ही element को एक से ज़्यादा method से style किया जाता है, तो inline CSS internal और external CSS पर जीतती है, और आमतौर पर बाद वाले rules पहले वाले rules पर जीतते हैं जब specificity बाकी सब बराबर हो।

Note: अगर कोई style जिसकी आप उम्मीद कर रहे थे नहीं दिख रहा, तो check करें कि क्या कोई inline style या कहीं और बाद वाला rule चुपचाप उसे override कर रहा है।

Warning: किसी element पर inline style के मौजूद होने की बात भूल जाना आसान है, जो 'मेरी CSS काम नहीं कर रही' जैसे issues को debug करना frustrating बना सकता है।

उदाहरण: Order of Precedence Between Methods

css

<head>
  <style>
    p { color: blue; }
  </style>
</head>
<body>
  <p style="color: red;">Inline wins over the internal style above</p>
</body>

सही Method चुनना

उस method को चुनें जो बदलाव के scope से मेल खाता हो: एक one-off tweak के लिए inline, एक self-contained page के लिए internal, और कई pages में shared किसी भी चीज़ के लिए external।

Note: अगर doubt हो, तो default रूप से एक external stylesheet चुनें, यह लगभग किसी भी असली project के लिए सबसे maintainable choice है।

Warning: एक ही project में तीनों methods को भारी मात्रा में mix करना यह predict करना कहीं ज़्यादा मुश्किल बना देता है कि असल में कौन-सा style लागू होगा।

उदाहरण: Choosing the Right Method

css

<!-- One-off tweak: inline -->
<p style="color: red;">One-off</p>
<!-- Self-contained page: internal -->
<style>p.local { color: blue; }</style>
<p class="local">Internal</p>
<!-- Shared across pages: external -->
<link rel="stylesheet" href="styles.css">

Live Example

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Selectors Next Lesson → CSS Comments