Keerti Web Mastery (Hinglish)

Hinglish

English

Hinglish

English

Appearance

Module 03 — Basic CSS & Responsive Styling (CSS Ke Core Concepts) ​

1. What is it? (Ye Kya Hai?) ​

CSS (Cascading Style Sheets) ek styling language hai jiska use HTML documents ko visually design, colorize, format aur responsive banane ke liye kiya jata hai.

HTML sirf ye batata hai ki webpage par kya content hai (jaise ye ek heading hai, ye ek paragraph hai), jabki CSS browser ke visual engine ko batata hai ki wo content screen par kaisa dikhna chahiye — uska color, font size, spacing, layout aur mobile responsiveness kaisa hoga.

2. Why do we use it? (CSS Kyun Zaroori Hai?) ​

Purane jamane mein (HTML 3.2 mein) styling direct HTML tags mein karni padti thi (jaise <font color="red">). Isse bohot saari problems create hoti thi:

  1. Separation of Concerns: HTML sirf structure aur meaning ke liye hona chahiye. CSS ko alag rakhne se code clean aur readable rehta hai.
  2. Global Maintenance: Agar aapki website par 1,000 pages hain aur client kehta hai ki brand color blue se green karna hai, to inline HTML mein 1,000 files edit karni padengi. External CSS mein sirf ek file mein ek line change karke poori website instant update ho jati hai.
  3. Browser Caching aur Fast Speed: External .css file ko browser ek baar download karke cache kar leta hai. Agle page par jane par dobara download nahi karna padta, jisse website super fast load hoti hai.
  4. Har Device Ke Liye Responsive: CSS ki Media Queries ki madad se ek hi website mobile phone, tablet, laptop aur 4K monitor par automatically adjust ho jati hai.

3. Simple Explanation (Real-Life Analogy) ​

Wahi ghar wala example yaad kijiye:

  • HTML ne hume cement aur eent ki deewarein di thein.
  • CSS ghar ka interior design hai: Ye deewaron par slate gray paint karta hai, floor par wooden tiles lagata hai, warm lighting set karta hai aur furniture ko sahi spacing ke sath arrange karta hai taki chalne mein pareshani na ho.

Bina CSS ke web ek aisi boring black-and-white kitaab jaisa hai jisme blue underline wale links hote hain. CSS us kitaab ko ek interactive aur sundar digital app bana deta hai.

4. Technical Explanation: The CSSOM & Linking Methods ​

Jab browser HTML parse karta hai aur use <link rel="stylesheet"> milta hai, to ye process hoti hai:

CSS Text Stream
       │
       ▼
Tokenization & Parsing
       │
       ▼
CSSOM Tree Construction (CSS Object Model)
       │
       ▼
Cascade Resolution (Specificity, Origin, Importance, Source Order)
       │
       ▼
Computed Style Calculation (rem aur % ko absolute pixels mein convert karna)

CSS Apply Karne Ke 3 Tarike: ​

  1. External Stylesheet (Industry Best Practice): <head> ke andar <link rel="stylesheet" href="styles.css">. Browser ise cache karta hai aur ye professional tarika hai.
  2. Internal Style Tag: <head> ke andar <style> ... </style>. Single page landing pages ke liye theek hai.
  3. Inline Styles: Tag ke andar style="color: red;". Production mein ise avoid karein! Inline style ka specificity score (1-0-0-0) itna high hota hai ki ise override karna bohot mushkil ho jata hai aur code ganda lagta hai.

5. Syntax & Anatomy (CSS Rule Ka Structure) ​

CSS rule do cheezon se milkar banta hai — Selector aur Declaration Block:

css
selector {
  property: value;
  property: value;
}
┌─────────────────────────────────────────────────────────────┐
│                          CSS RULE                           │
├───────────────┬─────────────────────────────────────────────┤
│   SELECTOR    │              DECLARATION BLOCK              │
├───────────────┼─────────────────────────────────────────────┤
│ .primary-card │ {                                           │
│               │   background-color: #ffffff; ◄── Declaration│
│               │   ▲                 ▲                       │
│               │   │                 └─ Value                │
│               │   └─ Property                               │
│               │   border-radius: 8px;                       │
│               │ }                                           │
└───────────────┴─────────────────────────────────────────────┘

6. CSS Selectors (Elements Ko Target Karna) ​

Selector TypeSyntaxExampleTargetSpecificity
Universal** { box-sizing: border-box; }Page ke sabhi elements0-0-0-0
Type / Elementelementh1 { color: #0ea5e9; }Sabhi <h1> tags0-0-0-1
Class.class.btn { padding: 10px; }class="btn" wale elements0-0-1-0
ID#id#header { position: sticky; }Unique id="header" element0-1-0-0
Attribute[attr="val"]input[type="email"] { border: red; }Specific attribute matching0-0-1-0
Grouping,h1, h2, h3 { font-weight: 700; }Teeno par same rule apply hogaAlag-alag
DescendantA Bnav a { color: white; }Nav ke andar kisi bhi depth par <a>Combine
Child (Direct)A > Bul > li { list-style: none; }Sirf direct children <li>Combine
Adjacent SiblingA + Bh2 + p { margin-top: 0; }<h2> ke turant baad aane wala <p>Combine
  • :hover: Mouse cursor upar aane par.
  • :focus / :focus-visible: Keyboard tab se focus aane par.
  • :first-child aur :last-child: Pehla ya aakhiri child element.
  • :nth-child(2n): Har alternate (even) row ko target karna.

7. Color Systems & Modern Color Functions ​

CSS mein colors likhne ke alag-alag tarike hote hain:

  • HEX: #0ea5e9 ya alpha transparency ke sath #0ea5e9cc.
  • RGB & RGBA: rgb(14, 165, 233) ya rgba(14, 165, 233, 0.8).
  • HSL & HSLA: hsl(199, 89%, 48%) (Hue = Color ka angle, Saturation = Intensity, Lightness = Darkness/Brightness). HSL developers ka favorite hai kyunki lightness badhane se asli color change nahi hota.
  • Modern CSS Color Level 4:
    css
    background-color: rgb(14 165 233 / 80%);
color: hsl(199 89% 48% / 0.9);

IMPORTANT

WCAG Contrast Rule: Text aur background ke beech hamesha sufficient contrast hona chahiye. Normal text ke liye minimum 4.5:1 contrast ratio compulsory hai taaki weak eyesight wale log bhi asani se padh sakein.

8. Typography & Font Styling ​

css
body {
  /* System fonts stack */
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 1rem;            /* Default browser size = 16px */
  font-weight: 400;           /* Normal weight */
  line-height: 1.6;           /* Unitless line height */
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.25rem;         /* 36px */
  font-weight: 800;
  line-height: 1.2;
}
  • Unitless line-height ka rule: Kabhi bhi parent par line-height: 24px hardcode na karein. Hamesha 1.5 ya 1.6 jaisa unitless number likhein. Isse child elements apne font size ke hisab se automatically line-height multiply kar lete hain aur text aapas mein chipakta nahi hai.

9. The CSS Box Model: border-box Reset Ka Jadoo ​

Screen par render hone wala har ek element ek rectangular box hota hai jiske 4 layers hote hain:

┌───────────────────────────────────────────────────────────┐
│                          MARGIN                           │
│     (Do alag-alag boxes ke beech ka baahri space)         │
│  ┌─────────────────────────────────────────────────────┐  │
│  │                       BORDER                        │  │
│  │             (Padding ke bahar ki boundary)          │  │
│  │  ┌───────────────────────────────────────────────┐  │  │
│  │  │                    PADDING                    │  │  │
│  │  │        (Border aur Content ke beech ka space) │  │  │
│  │  │  ┌─────────────────────────────────────────┐  │  │  │
│  │  │  │                 CONTENT                 │  │  │  │
│  │  │  │        (Asli text, image ya child tag)  │  │  │  │
│  │  │  └─────────────────────────────────────────┘  │  │  │
│  │  └───────────────────────────────────────────────┘  │  │
│  └─────────────────────────────────────────────────────┘  │
└───────────────────────────────────────────────────────────┘

The Universal box-sizing: border-box Reset: ​

Purane CSS mein agar aap likhte the: width: 200px; padding: 20px; border: 2px solid black;, to box ka total size bahar ki taraf badh kar ho jata tha: $$\text{Total Width} = 200 + 20 + 20 + 2 + 2 = 244\text{px}$$ Is wajah se grid layouts tut jate the aur horizontal scrollbar aa jata tha.

Is problem ko solve karne ke liye modern web development mein sabse pehli CSS line ye likhi jati hai:

css
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

border-box lagane ke baad, agar aapne width: 200px di hai, to box ka total size hamesha 200px hi rahega. Padding aur border andar ki taraf shrink honge, box bahar nahi failega!

10. Dimensions & Units: px vs rem vs em vs vh/vw ​

  • px (Pixels): Fixed dot size. Thin decorative borders (1px solid) ke liye best hai.
  • rem (Root EM): Browser ke root <html> font-size ke barabar (default 16px). Accessible websites banane ke liye paddings, margins aur font sizes mein hamesha rem use karein.
  • em: Current element ke font size ke relative hota hai. Buttons ki padding ke liye ideal hai taaki font size badhane par padding bhi proportionally scale ho.
  • %: Parent container ke size ke hisab se percentage.
  • vw / vh: Viewport (screen) ka 1% width ya height.

11. CSS Display: Normal Flow vs None ​

  • display: block: Nayi line se shuru hota hai, 100% full width leta hai aur width, height, margin, padding sab follow karta hai (jaise <div>, <p>).
  • display: inline: Text ke beech flow karta hai, width aur height ignore kar deta hai (jaise <span>, <a>).
  • display: inline-block: Text ki tarah line mein baithta hai, lekin width, height aur padding bhi respect karta hai (buttons aur badges ke liye best).
  • display: none: Element ko screen aur Accessibility Tree dono se gayab kar deta hai (space 0 ho jata hai).
  • visibility: hidden: Element dikhta nahi hai, lekin layout mein apni khali jagah banaye rakhta hai.

12. CSS Positioning: Static, Relative, Absolute, Fixed, Sticky ​

Static (Default document flow)
   │
Relative (Apni jagah se offset hona; child ke liye coordinate anchor banna)
   │
Absolute (Flow se bahar; sabse pass wale non-static parent ke hisab se baithna)
   │
Fixed (Screen window ke hisab se chipak jana, scroll karne par bhi nahi hilta)
   │
Sticky (Normal flow mein rehta hai, scroll hone par ek point par aakar stick ho jata hai)

Parent Relative + Child Absolute Pattern: ​

Card ke corner mein badge chipkane ka classic pattern:

css
.card {
  position: relative; /* Child ke liye coordinate anchor */
  padding: 24px;
  background: white;
  border-radius: 12px;
}

.badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #0ea5e9;
  color: white;
  padding: 4px 8px;
  border-radius: 20px;
}

13. Mobile-First Responsive Design & Media Queries ​

Mobile-first ka matlab hai pehle mobile screen ke liye CSS likhein, fir @media (min-width: ...) laga kar tablet aur desktop ke liye styles expand karein:

css
/* Mobile Styles (Sabse pehle apply honge) */
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

/* Tablet Screens (>= 768px) */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .card {
    flex: 1 1 calc(50% - 16px);
  }
}

/* Desktop Screens (>= 1024px) */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px;
  }
  .card {
    flex: 1 1 calc(33.333% - 16px);
  }
}

14. Common Mistakes (Jo Har Naya Developer Karta Hai) ​

  1. Margin Collapsing Se Pareshan Hona:
    • Jab do vertical margins milte hain (heading ka margin-bottom: 20px aur paragraph ka margin-top: 30px), to wo 50px nahi bante; collapse hokar sirf 30px bante hain. Modern CSS mein vertical margin ke bajaye Flexbox/Grid ka gap use karein.
  2. Fixed Width Dena:
    • Galti: .card { width: 600px; } (Mobile screen 375px ki hoti hai, to horizontal scrollbar aa jayega).
    • Solution: .card { width: 100%; max-width: 600px; }.
  3. CSS mein #id Selectors Ka Zyada Use:
    • ID selector ka specificity score bohot high hota hai. Styling ke liye hamesha classes (.card, .btn) use karein.
  4. Text Containers Par Fixed Height Dena:
    • Text badhne par box ke bahar nikal jata hai. Fixed height ke badle min-height ya padding use karein.

15. Interview Questions & Answers ​

Q1: CSS Box Model kya hai aur box-sizing: border-box isko kaise change karta hai? ​

Answer: CSS Box Model screen ke har element ko chaar layers mein divide karta hai: Content, Padding, Border aur Margin. Default CSS (content-box) mein width sirf inner content par apply hoti hai, jisse padding aur border add karne par box ka total size badh jata hai. box-sizing: border-box lagane par di gayi width ke andar hi content, padding aur border teeno fit ho jate hain, jisse responsive layout banana bohot accurate aur aasan ho jata hai.

Q2: position: absolute wale element ka positioning context kaun decide karta hai? ​

Answer: position: absolute lagane par element normal document flow se bahar nikal jata hai. Wo apne sabse kareebi ancestor (parent) ko dhoondhta hai jiska position property static ke alawa kuch aur ho (jaise relative, absolute, fixed ya sticky). Agar koi aisa parent na mile, to wo seedha browser viewport (Initial Containing Block) ke coordinates ko apna reference maanta hai.

16. Quick Revision Points ​

  • Pehli line hamesha universal reset honi chahiye: *, *::before, *::after { box-sizing: border-box; }.
  • Spacing aur typography ke liye rem aur borders ke liye px use karein.
  • Unitless line-height: 1.5 text clipping se bachata hai.
  • Parent par position: relative lagakar child ko position: absolute se pin karein.
  • Mobile-first responsive design ke liye min-width media queries use karein.

17. Next Topic (Agla Kadam) ​

Aapka agla step hai Module 04 — Advanced CSS, Flexbox & Grid, jahan hum CSS Cascade algorithm, specificity wars, Flexbox 1D alignment, CSS Grid 2D tracks, clamp(), container queries aur animations seekhenge.

G-TEC Jain Keerti Education — Global Leader in IT Education

© 2026 G-TEC Jain Keerti Education. All Rights Reserved.