CSS Implementation in Hindi

CSS को HTML में implement करने के तीन मुख्य तरीके होते हैं: Inline CSS, Internal CSS और External CSS। इन तीनों methods का काम HTML elements को style करना है, लेकिन इनका तरीका और use-case अलग होता है।

किसी छोटे और specific element को तुरंत style करना हो तो Inline CSS useful हो सकती है। किसी एक HTML page के लिए अलग styling चाहिए तो Internal CSS का use किया जा सकता है। वहीं पूरी website या multiple pages पर एक जैसी styling apply करनी हो तो External CSS सबसे practical तरीका होता है।

1. Inline CSS

Inline CSS में CSS को directly HTML element के style attribute के अंदर लिखा जाता है। इसका मतलब है कि CSS उसी particular element पर apply होती है।

Inline CSS का use तब किया जा सकता है जब किसी एक element को बाकी elements से अलग styling देनी हो या किसी छोटे example में quickly CSS test करनी हो।

Syntax:

ऊपर के example में style attribute के अंदर color और font-size properties दी गई हैं। इसलिए ये styles केवल उसी <p> element पर apply होंगी।

Inline CSS के फायदे

• किसी specific element को जल्दी style किया जा सकता है।
• CSS लिखने के लिए अलग file की जरूरत नहीं होती।
• छोटे experiments और testing के लिए useful है।

Inline CSS की limitations

• बहुत ज्यादा elements पर CSS लिखने से HTML code बड़ा हो जाता है।
• एक ही style को कई elements पर repeat करना पड़ सकता है।
• बड़ी website को maintain करना मुश्किल हो सकता है।
• HTML और CSS अलग रखने का फायदा नहीं मिलता।

इसलिए बड़ी websites में Inline CSS का जरूरत से ज्यादा use करने के बजाय Internal या External CSS का use करना ज्यादा practical होता है।

2. Internal CSS

Internal CSS में CSS code उसी HTML document के अंदर लिखा जाता है। इसके लिए आमतौर पर <head> section में <style> tag का use किया जाता है।

Internal CSS तब useful होती है जब किसी particular HTML page की styling उसी page तक सीमित रखनी हो।

Example:

इस example में CSS को <style> tag के अंदर लिखा गया है। इसलिए इस HTML document के अंदर मौजूद सभी matching <h1> और <p> elements पर ये styles apply हो सकती हैं।

Internal CSS के फायदे

• एक ही page की पूरी styling एक जगह रखी जा सकती है।
• छोटे या single-page projects के लिए convenient है।
• बार-बार elements में style attribute लिखने की जरूरत कम हो जाती है।

Internal CSS की limitations

• अगर website में बहुत सारे pages हैं तो हर page में CSS दोबारा लिखनी पड़ सकती है।
• एक common design को multiple pages पर maintain करना मुश्किल हो सकता है।
• HTML document में CSS होने के कारण file का size बढ़ सकता है।

3. External CSS

External CSS में CSS code को एक अलग .css file में रखा जाता है। इसके बाद HTML document में <link> tag की मदद से उस CSS file को connect किया जाता है।

उदाहरण के लिए, अगर CSS file का नाम style.css है, तो इसे HTML में इस तरह link किया जा सकता है:

यहाँ href="style.css" browser को बताता है कि CSS rules style.css नाम की file में मौजूद हैं।

style.css file:

External CSS का सबसे बड़ा फायदा यह है कि एक ही CSS file को multiple HTML pages के साथ use किया जा सकता है। इससे पूरी website की common styling को एक जगह से manage करना आसान हो जाता है।

External CSS के फायदे

• पूरी website की common styling एक अलग file में रखी जा सकती है।
• एक CSS file को कई HTML pages में reuse किया जा सकता है।
• HTML code ज्यादा clean और readable रहता है।
• Website को maintain और update करना आसान होता है।
• Browser external CSS file को cache कर सकता है, जिससे repeated page visits में performance बेहतर हो सकती है।

External CSS की limitations

• HTML और CSS अलग files में होने के कारण files का structure समझना जरूरी होता है।
• CSS file का path गलत होने पर styles load नहीं होंगी।
• CSS file server या network से load होने पर initial loading में extra resource request हो सकती है।

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

तीनों methods का उद्देश्य HTML को style करना है, लेकिन इनके use और management में अंतर होता है।

CSS Method	CSS कहाँ लिखते हैं?	Best Use	Reuse
Inline CSS	style attribute में	Single element की styling	कम
Internal CSS	<style> tag में	Single HTML page	एक page तक
External CSS	अलग .css file में	Multiple pages / website	बहुत अधिक

4. तीनों CSS Methods का Combined Example

एक HTML page में जरूरत के अनुसार Inline, Internal और External CSS को समझना important है। नीचे एक example में Inline और Internal CSS दिखाई गई है, जबकि External CSS को अलग file से connect किया गया है।

इस example में:

• Inline CSS: पहले paragraph के style attribute में color: red; दिया गया है।
• Internal CSS: <style> tag के अंदर h1 और p के लिए rules लिखे गए हैं।
• External CSS: <link> tag के जरिए style.css file connect की गई है।

Real-world projects में इन methods का use project की जरूरत के अनुसार किया जाता है। छोटे specific changes के लिए Inline CSS useful हो सकती है, single-page styling के लिए Internal CSS और बड़ी या multiple-page websites के लिए External CSS अधिक convenient होती है।

CSS Implementation के लिए कौन-सा Method कब Use करें?

• Inline CSS: जब किसी एक specific element पर छोटा style change करना हो।
• Internal CSS: जब केवल एक HTML page की styling अलग रखनी हो।
• External CSS: जब multiple pages में common design और styling maintain करनी हो।

एक अच्छी तरह structured website में CSS को HTML से अलग रखने के लिए अक्सर External CSS का use किया जाता है। इससे code को maintain करना, design में changes करना और एक ही styling को कई pages पर लागू करना आसान हो जाता है।

---

---

---

---

---

---

Quizzes in Hindi

---

---

---