HTML CSS

एक car design करने की कल्पना कीजिए। HTML आपको engine, frame, और wheels देता है। यह functional है, लेकिन raw metal है। CSS paint job, leather seats, sleek aerodynamic curves, और चमकदार chrome wheels है। CSS का मतलब है Cascading Style Sheets। यह वह language है जिसका उपयोग हम अपने HTML layouts को style और design करने के लिए करते हैं, उन्हें simple document structures से gorgeous, interactive digital platforms में बदलते हुए। content (HTML) को presentation (CSS) से अलग करके, आप एक ही file से अपनी पूरी website के दिखने के तरीके को पूरी तरह बदल सकते हैं, जिससे updates बेहद तेज हो जाते हैं।

In this page:

Inline CSS Styles
Internal CSS Stylesheets
External CSS Stylesheets
CSS Box Model को समझना
CSS Cascading और Override Specificity
Inline Styles क्यों एक बुरी Practice है
Class बनाम ID Selectors
तीनों CSS Methods की तुलना

Syntax

markup

<tagname style="property: value;">content</tagname>

<style>
  selector {
    property: value;
  }
</style>

<link rel="stylesheet" href="styles.css">

Inline CSS Styles

Inline CSS style attribute का उपयोग करके सीधे आपके HTML tags के अंदर apply किया जाता है। यह आपको एक single element को target करने और उसकी styles तुरंत बदलने देता है।

क्योंकि inline styles सीधे tag पर apply होती हैं, उनकी specificity ranking सबसे ज़्यादा होती है और वे external stylesheets को override कर देती हैं।

Note: fast debugging के लिए या JavaScript से styled dynamic elements के लिए inline styles का उपयोग करें।

Warning: पूरी websites inline styles के साथ बनाने से बचें क्योंकि वे आपकी HTML file को clutter करते हैं और layout updates को tedious बना देते हैं।

उदाहरण: Inline CSS Styles

markup

<p style="color: blue;">Styled directly on the tag</p>

Internal CSS Stylesheets

Internal CSS आपके style rules को page के head section के अंदर एक single style block में collect करता है। यह आपके rules को organize करता है, आपके layout code को clean रखता है, और आपको एक ही webpage पर एक साथ कई elements को style करने देता है।

Note: Internal CSS standalone pages या custom utility templates को style करने के लिए बेहतरीन है जो बाकी site के साथ patterns share नहीं करते।

Warning: अगर आपकी multi-page website है, तो internal stylesheets के लिए आपको हर page पर style rules को copy-paste करना पड़ता है, जो site updates को जटिल बना देता है।

उदाहरण: Internal CSS Stylesheets

markup

<head>
  <style>
    p {
      color: green;
    }
  </style>
</head>

External CSS Stylesheets

External CSS layout design का industry standard है। आप अपने style rules एक अलग .css text file के अंदर लिखते हैं और link element का उपयोग करके इसे अपने HTML documents से जोड़ते हैं।

यह आपको एक ही stylesheet file से हज़ारों अलग-अलग web pages का design manage करने देता है।

Note: अपने external style rules को अपनी main project directory के अंदर styles.css नाम की file में save करें।

Warning: सुनिश्चित करें कि आपके HTML document में href link path आपकी external file location से बिल्कुल मेल खाता हो, वरना आपका page unstyled plain text के रूप में render होगा।

उदाहरण: External CSS Stylesheets

markup

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Page Heading</h1>
  <p>This paragraph is styled by styles.css</p>
</body>

CSS Box Model को समझना

किसी web page पर हर element को एक rectangular box माना जाता है।

CSS Box Model यह निर्धारित करता है कि ये boxes कैसे calculate होते हैं, अंदर से बाहर की ओर चार layers stack करते हुए: Content, Padding (border के अंदर खाली जगह), Border (frame outline), और Margin (border के बाहर elements को अलग करने वाली खाली जगह)।

Note: border widths को आपके elements को alignment से बाहर धकेलने से रोकने के लिए globally box-sizing: border-box; property का उपयोग करें।

Warning: एक fixed width वाले element में padding या borders जोड़ने से उसका physical size screen पर बढ़ जाएगा जब तक आप box-sizing adjust नहीं करते।

उदाहरण: Understanding the CSS Box Model

markup

<div style="width: 200px; padding: 10px; border: 1px solid black; margin: 20px;">
  Content
</div>

CSS Cascading और Override Specificity

CSS में C का मतलब है Cascading। इसका मतलब है कि style rules नीचे की ओर cascade होते हैं।

जब कई विरोधाभासी rules एक ही element को target करते हैं, तो ब्राउज़र तीन factors के आधार पर तय करता है कि कौन सा rule जीतता है: Source Order (बाद के rules पहले वालों को override करते हैं), Specificity (ids classes को हराते हैं, जो tags को हराते हैं), और Inline Override।

Note: style overrides को force करने के लिए !important tag का उपयोग करने से बचें क्योंकि यह layout inheritance को बिगाड़ता है और code troubleshooting को मुश्किल बनाता है।

Warning: अगर आपके styles नहीं दिख रहे हैं, तो सुनिश्चित करें कि आपके stylesheets में कोई ज्यादा specific selector path आपके changes को block नहीं कर रहा।

उदाहरण: CSS Cascading and Override Specificity

markup

<style>
  p { color: blue; }
  p { color: red; }
</style>
<p>This text is red because the later rule wins.</p>

Inline Styles क्यों एक बुरी Practice है

किसी element पर style attribute के साथ सीधे लिखी गई inline styles जल्दी लग सकती हैं, लेकिन वे आपके content और design को आपस में मिला देती हैं, जिससे site को maintain करना मुश्किल हो जाता है।

अगर आप सौ pages में एक रंग बदलना चाहते हैं, तो आपको एक CSS rule की बजाय हर एक element को edit करना पड़ेगा।

Note: लगभग हर बार style="..." के बजाय एक class name और external stylesheet rule का उपयोग करें — यह आपकी styling को reusable और searchable बनाए रखता है।

Warning: Inline styles की किसी भी regular CSS से सबसे ज्यादा specificity होती है, जिसका मतलब है कि उन्हें बाद में !important के बिना override करना बहुत मुश्किल है, जो और भी ज्यादा problems पैदा करता है।

उदाहरण: Why Inline Styles Are Bad Practice

markup

<p style="color: red;">Page 1</p>
<p style="color: red;">Page 2</p>
<p style="color: red;">Page 3</p>

Class बनाम ID Selectors

एक class selector (एक dot के साथ लिखा गया, जैसे .card) को जितने चाहें उतने elements पर apply किया जा सकता है और यह repeated components को style करने का standard तरीका है।

एक ID selector (hash के साथ लिखा गया, जैसे #header) page पर unique होना चाहिए और यह एक specific element, जैसे page की main navigation bar, के लिए होता है।

Note: लगभग हर चीज़ के लिए classes को default चुनें — किसी ID की ज़रूरत सिर्फ तब लें जब आपके पास सच में एक unique element हो, जैसे उसे anchor link से link करना।

Warning: ID selectors की classes से कहीं ज्यादा specificity होती है, इसलिए styling के लिए IDs को overuse करने से आपकी CSS को बाद में override करना मुश्किल हो जाता है।

उदाहरण: Class vs ID Selectors

markup

<style>
  .card { border: 1px solid gray; }
  #header { font-weight: bold; }
</style>
<div class="card">Card 1</div>
<div id="header">Main Header</div>

तीनों CSS Methods की तुलना

Inline CSS सीधे किसी element पर लिखी जाती है और सिर्फ उसी एक element को प्रभावित करती है। Internal CSS document head के अंदर style tag में रहती है और उस पूरे page को प्रभावित करती है जिसमें यह लिखी गई है।

External CSS link tag से जुड़ी एक अलग .css file में रहती है और पूरी website के हर page में share की जा सकती है।

Note: असल projects के लिए External CSS लगभग हमेशा सही choice है — यह ब्राउज़र द्वारा cacheable है और आपके HTML को clean रखती है।

Warning: एक ही page पर तीनों methods को mix करने से यह predict करना बहुत मुश्किल हो जाता है कि conflict होने पर असल में कौन सी style जीतती है।

उदाहरण: Comparing the Three CSS Methods

markup

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    p { color: green; }
  </style>
</head>
<body>
  <p style="color: blue;">Inline wins here</p>
</body>

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson HTML HSL Colors Next Lesson → HTML Links

HTML CSS

Inline CSS Styles

Internal CSS Stylesheets

External CSS Stylesheets

CSS Box Model को समझना

CSS Cascading और Override Specificity

Inline Styles क्यों एक बुरी Practice है

Class बनाम ID Selectors

तीनों CSS Methods की तुलना

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code