M2-R5 Chapter 4: CSS – Selectors, Box Model, Flexbox, Tables, Menu & Gallery Hindi Notes, 50 MCQs (NIELIT O Level 2026)

📑 Table of Contents — किसी भी topic पर सीधे जाएँ

4.0

CSS Introduction — Design व Structure अलग-अलग

CSS (Cascading Style Sheets) एक style sheet language है जो HTML elements के design, layout व formatting को control करती है। HTML structure देता है, CSS presentation तय करती है।

📖 Definition

"CSS is a style sheet language used to describe the presentation of documents written in HTML or XML."

🎨 CSS का पहला उदाहरण

<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>

<style>
h1 { color: navy; text-align: center; }
p { font-size: 18px; color: #555; }
</style>

⭐ Why is CSS Important?

HTML content को सुंदर व structured layout देता है।
Design अलग file में रखने से code reusable बनता है।
Website को responsive व mobile-friendly बनाया जा सकता है।
Maintenance आसान व time-saving होता है।

🧩 Syntax of CSS

🎨 basic rule structure

selector {
  property: value;
}

Selector: HTML element का नाम। Property: जिस feature को बदलना है (color, font-size)। Value: उस property का मान (red, 20px)।

Exam Point: CSS = presentation language; HTML = structure। Syntax: selector { property: value; }। CSS design को content से अलग रखता है — maintainability सुधारती है।

4.1

Types of CSS — Inline, Internal, External

CSS को तीन भागों में बाँटा जाता है — Inline, Internal व External। उद्देश्य है HTML structure व design को अलग रखते हुए maintainable, reusable व fast websites बनाना।

1️⃣ Inline CSS

HTML element के अंदर style="" attribute से सीधा style apply करना। छोटे/स्पेशल बदलाव या quick testing के लिए, पर reusability कम।

🎨 inline style attribute

<h1 style="color:#1f4ad1; text-align:center;">Welcome</h1>
<p style="font-size:18px; color:#555;">Inline CSS example.</p>

2️⃣ Internal (Embedded) CSS

उसी HTML फ़ाइल के <head> में <style> tag के अंदर CSS लिखना। Single page projects के लिए ठीक, multiple pages में code duplicate होता है।

🎨 head में style tag

<head>
  <style>
    body { font-family: Segoe UI, sans-serif; background:#f7f9fc; }
    h1 { color:#0b3ea9; text-align:center; }
  </style>
</head>

3️⃣ External CSS (Recommended)

CSS को अलग .css file में लिखकर HTML से <link> द्वारा जोड़ना। Reusability, consistency, caching से better performance।

🎨 index.html — link से जोड़ना

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="title">External CSS Demo</h1>
</body>

🎨 styles.css — अलग file

body{font-family:Segoe UI, sans-serif; background:#fff;}
.title{color:#1f4ad1; text-align:center;}

Type	कहाँ लिखा जाता है	Reusability
Inline	Element के अंदर style="..."	सबसे कम
Internal	head के अंदर <style>	सिर्फ उसी page में
External	अलग .css file	पूरी site में reusable

✅ Tip: Real projects में External CSS उपयोग करें; Inline केवल quick fixes के लिए, Internal single-page demos के लिए ठीक है।

Exam Point: Inline = style attribute (कम reusable); Internal = head में style tag (single page); External = .css file + link tag (सबसे recommended, reusable व fast)।

4.2

CSS Selectors — किस Element पर Style लगे

CSS Selectors यह निर्धारित करते हैं कि किस HTML element पर कौन-सा style लागू होगा — elements को नाम, class, id, relation या state के आधार पर target किया जा सकता है।

1️⃣ Universal Selector (*)

सभी elements को select करता है — reset CSS या global style के लिए।

🎨 universal reset

*{margin:0; padding:0; box-sizing:border-box;}

2️⃣ Tag Selector

HTML tag के नाम द्वारा सभी समान elements को target करता है।

🎨 tag/type selector

h1{color:#1f4ad1;text-align:center;}
p{color:#475569;font-size:18px;}

3️⃣ Class Selector (.classname)

एक ही style कई elements पर लगाने के लिए।

🎨 class reuse

.note{background:#fff8e1;border-left:4px solid #ff9800;padding:8px;}

4️⃣ ID Selector (#idname)

एक uniquely identified element को select करता है — एक page पर ID unique होनी चाहिए।

🎨 id-based styling

#header{color:#0b3ea9;text-transform:uppercase;}

5️⃣ Descendant Selector (parent child)

Parent के अंदर मौजूद सभी matching child elements को target करता है (कितनी भी levels गहराई में)।

🎨 nested selection

.article p{color:#1f4ad1;font-weight:bold;}

6️⃣ Child Selector (parent > child)

केवल immediate (direct) child elements पर style लगाता है।

🎨 direct child only

div>p{color:#ff5722;font-weight:600;}

7️⃣ & 8️⃣ Sibling Selectors

🎨 adjacent (+) व general (~) sibling

h2+p{color:#0b3ea9;font-style:italic;}  /* just next sibling */
h2~p{color:#4a148c;}                    /* सभी following siblings */

9️⃣ Attribute Selectors

Syntax	Match
`[attr]`	attribute मौजूद हो
`[attr="value"]`	exact match
`[attr^="value"]`	value से शुरू होने वाले
`[attr$="value"]`	value पर समाप्त होने वाले
`[attr*="value"]`	value substring शामिल हो

🎨 attribute-based targeting

input[type="email"]{border-color:#1f4ad1;}
a[href^="https"]{color:green;}
a[href$=".pdf"]{color:red;}

🔟 Group Selector

🎨 एक साथ कई selectors

h1,h2,h3{color:#0b3ea9;margin-bottom:10px;}

1️⃣1️⃣ Pseudo-Classes

Element की special state/position पर style — :hover, :active, :focus, :first-child, :nth-child()।

🎨 state-based styling

button:hover{background:#1f4ad1;color:#fff;}
ul li:first-child{color:green;}
input:focus{border-color:#0b3ea9;}

1️⃣2️⃣ Pseudo-Elements

Element के हिस्सों या generated content पर style — ::before, ::after, ::first-line, ::selection।

🎨 generated content

h1::before{content:"★ ";color:gold;}
::selection{background:#ffeb3b;color:#000;}

Specificity का क्रम — कौन जीतेगा?

Exam Point: Specificity क्रम — Universal < Tag < Class/Attribute/Pseudo-class < ID < Inline। Conflicts में हमेशा higher specificity वाला rule apply होता है। parent>child = direct child only; parent child = सभी descendants।

4.3

Colors, Units & Typography — रंग और अक्षरों की भाषा

Color values कई तरीकों से लिखे जाते हैं — नाम (red), Hex (#1f4ad1), rgb(), rgba() (opacity के साथ), hsl()। Units — Absolute (px) व Relative (%, em, rem, vw, vh)।

🎨 Colors & Units

px: fixed pixels; %: parent के अनुपात में।
em: current font-size का गुणक; rem: root font-size पर आधारित।
rgba() में आख़िरी मान 0-1 opacity देता है (0=transparent, 1=opaque)।

🎨 colors व units demo

:root{ font-size:16px; }
h1{ color:#1f4ad1; }
p.note{ background:rgba(255,235,59,.3); }
.box{ width:50%; padding:1rem; font-size:1.125rem; }

🔤 Typography (Fonts, Text)

Property	काम
font-family	fallback के साथ fonts की list
font-size / font-weight	अक्षर का आकार व मोटाई
line-height	lines के बीच spacing (1.5-1.8 सामान्य)
text-align	left/center/right/justify
text-transform	uppercase/lowercase/capitalize
letter-spacing	अक्षरों के बीच गैप

🎨 typography demo

body{font-family:"Segoe UI", Arial, sans-serif; line-height:1.7;}
h1{font-size:2rem; text-align:center; text-transform:uppercase; letter-spacing:.06em;}
a{color:#0b3ea9; text-decoration:none;}
a:hover{text-decoration:underline;}

Exam Point: rem = root font-size आधारित (सभी जगह consistent), em = parent font-size आधारित (nested होने पर compound हो सकता है)। rgba का 4th value opacity है।

4.4

Background Properties — रंग व चित्र पीछे लगाना

किसी element के पीछे रंग या चित्र लगाने के लिए background properties उपयोग होती हैं।

Property	काम
background-color / background-image	रंग या चित्र (url से)
background-repeat	repeat/no-repeat/repeat-x/repeat-y
background-position	left/top/center या "50% 20%"
background-size	cover (पूरा क्षेत्र भरे), contain (पूरी image दिखे)
background-attachment	fixed (parallax जैसा असर)

🎨 hero background shorthand

.hero{
  background: url('bg.jpg') center/cover no-repeat fixed;
  color:#fff; padding:3rem 1rem; text-align:center;
}

Exam Point: background shorthand order: color image position/size repeat attachment। cover=crop होकर पूरा क्षेत्र भरे, contain=पूरी image दिखे (crop नहीं)।

4.5

Box Model, Borders & Outline — हर Element की चार परतें

हर element चार layers से बनता है — content → padding → border → margin।

CSS Box Model

padding/margin: चारों ओर; shorthand: top right bottom left।
2-value shorthand: vertical horizontal; 3-value: top horizontal bottom।
box-sizing: border-box से width में padding/border शामिल — layout आसान।

🎨 box model in action

*{box-sizing:border-box;}
.card{width:320px; padding:16px; border:2px solid #1f4ad1; margin:20px auto;}

🖼️ Borders & Outline

Border box का हिस्सा है, जगह लेता है। Outline बाहर की ओर draw होता है, layout प्रभावित नहीं करता — focus दिखाने में उपयोगी।

🎨 border-radius व focus outline

.btn{border:2px solid #0b3ea9; border-radius:8px; padding:.5rem 1rem;}
.btn:focus{outline:3px dashed #ff9800; outline-offset:3px;}

Exam Point: Box Model order (बाहर से अंदर): margin→border→padding→content। box-sizing:border-box सबसे common interview/exam question है। outline layout नहीं बदलता, border बदलता है।

4.6

Display, Visibility, Sizing & Overflow — Element कैसे Behave करे

display तय करता है element layout में कैसे behave करेगा — block (पूरी line), inline (content जितना), inline-block (inline + width/height मान्य), flex, grid, none (हटा देता है)।

🎨 display values

.badge{display:inline-block; padding:.25rem .5rem; border-radius:999px;}
.hide{display:none;}

💡 Note: visibility:hidden element की जगह रखता है पर दिखता नहीं; display:none जगह भी हटा देता है।

📏 Sizing & Overflow

Elements की size width, height, min-/max- से constrain करें। Content बड़ा हो तो overflow: visible/hidden/scroll/auto।

🎨 sizing व overflow

.box{
  width:260px; height:120px; max-width:90%;
  overflow:auto; border:1px solid #ccc; padding:8px;
}

Exam Point: display:none = DOM+layout दोनों से हट जाता है; visibility:hidden = जगह बनी रहती है सिर्फ invisible। overflow:auto ज़रूरत पड़ने पर ही scrollbar देता है।

4.7

Positioning & z-index — Element को कहाँ रखें

Value	Behaviour
static	default normal flow
relative	अपने original स्थान से offset (जगह बनी रहती है)
absolute	nearest positioned ancestor के अनुसार; flow से बाहर
fixed	viewport से चिपका — scroll पर नहीं हिलता
sticky	scroll तक normal, फिर threshold पर stick

🎨 सभी positioning values

.wrapper{position:relative; height:200px;}
.box-rel{position:relative; top:10px; left:10px;}
.box-abs{position:absolute; top:20px; right:10px;}
.header-fixed{position:fixed; top:0; left:0; right:0; z-index:100;}
.note-sticky{position:sticky; top:8px;}

💡 z-index: stacking order तय करता है — बड़ा value ऊपर दिखता है (सिर्फ positioned elements पर काम करता है)।

Exam Point: relative = खुद के हिसाब से offset (जगह रहती है); absolute = positioned ancestor के हिसाब से (जगह नहीं रहती); fixed = viewport; sticky = scroll पर threshold तक normal फिर stick।

4.8

Flexbox — Modern Layout (Beginner Must-Know)

एक-dimension (row/column) में items को align व distribute करने का आसान तरीका। Parent पर display:flex लगाएँ।

Flexbox — Main Axis व Cross Axis

flex-direction: row/column
justify-content: main axis alignment (start/center/space-between)
align-items: cross axis alignment (stretch/center)
gap: items के बीच spacing
Child: flex shorthand = grow shrink basis (जैसे flex:1 1 200px)

🎨 flex container + items

.container{display:flex; gap:12px; justify-content:space-between; align-items:center;}
.item{flex:1 1 160px; padding:12px; background:#e3f2fd;}

Exam Point: display:flex parent पर लगता है। justify-content = main axis, align-items = cross axis। gap items के बीच spacing देता है (margin की ज़रूरत नहीं)।

4.9

Float & Clear (Legacy) — पुराना तरीका, Exam-Useful

float originally images के आसपास text wrap के लिए बना था। Modern layout में flex/grid बेहतर हैं, फिर भी exam में पूछा जा सकता है। clear float को अगले element से टकराने से रोकता है।

🎨 float + clearfix pattern

.thumb{float:left; width:120px; margin:0 12px 8px 0;}
.clearfix::after{content:""; display:block; clear:both;}

💡 Note: Float किए गए elements parent की height में count नहीं होते — इसीलिए parent पर clearfix लगाना पड़ता है, वरना parent की height "collapse" हो जाती है।

Exam Point: float:left/right से element side में जाकर text उसके चारों ओर wrap होता है। clearfix trick (::after content clear:both) parent collapse की समस्या ठीक करती है।

4.10

Effects: Shadow, Opacity, Transitions — Interaction को Smooth बनाना

box-shadow, text-shadow — depth/contrast के लिए।
opacity (0-1) — transparency।
cursor — pointer, move, not-allowed आदि।
transition — smooth change (hover effects आदि)।

🎨 hover card lift effect

.card2{
  padding:16px; box-shadow:0 4px 16px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease; cursor:pointer;
}
.card2:hover{ transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,.14); }

Exam Point: transition = property, duration, timing-function; hover के साथ मिलकर smooth animation बनाता है। opacity 0=पूरी तरह transparent, 1=पूरी तरह opaque।

4.11

CSS Lists — सूचियाँ सजाना

Lists (ul/ol) के bullets, spacing, icons व hover effects CSS से control होते हैं।

list-style-type — disc, circle, square, decimal, upper-roman आदि।
list-style-position — inside/outside (bullets की जगह)।
list-style-image — custom image को bullet बनाना।

🎨 styled list with hover

ul.features{list-style-type:square; padding:15px; border-radius:8px;}
ul.features li{margin-bottom:8px; padding:4px; transition:background .3s ease;}
ul.features li:hover{background:#e3f2fd;}

💡 Tip: Custom bullets के लिए — list-style-image: url('icon.png');।

Exam Point: list-style-type से bullet/number style, list-style-position से bullets अंदर/बाहर, list-style-image से custom icon bullet बनता है।

4.12

CSS Tables — Data को Professional Look देना

HTML tables को modern look देने के लिए CSS उपयोग होता है — borders, zebra striping, hover व responsive scroll के साथ।

1️⃣ HTML Structure

🌐 student marksheet — HTML

<div class="table-container">
  <table>
    <caption>Student Marksheet</caption>
    <thead>
      <tr><th>Roll No</th><th>Name</th><th>Marks</th></tr>
    </thead>
    <tbody>
      <tr><td>101</td><td>Ravi Kumar</td><td>86</td></tr>
      <tr><td>102</td><td>Pooja Sharma</td><td>91</td></tr>
    </tbody>
  </table>
</div>

2️⃣ CSS Styling

🎨 professional table styling

.table-container{ overflow-x:auto; display:block; }
table{ width:100%; border-collapse:collapse; }
caption{ caption-side:top; font-weight:bold; padding:12px; background:#1f4ad1; color:#fff; }
th,td{ padding:12px 15px; text-align:left; border-bottom:1px solid #dbeafe; }
th{ background:#e3f2fd; text-transform:uppercase; color:#0b3ea9; }
tr:nth-child(even){ background:#f7f9fc; }
tr:hover{ background:#dcecff; transition:background .3s ease; }

Property	काम
border-collapse	cell borders को एक line में merge करता है
:nth-child(even)	alternate row coloring (zebra effect)
caption-side: top	table का heading ऊपर दिखाता है
overflow-x:auto	छोटी screen पर table scroll होती है

Exam Point: border-collapse:collapse से double borders एक line बनती है; nth-child(even) से zebra striping; overflow-x:auto+display:block responsive table बनाता है।

4.13

CSS Menu Design — Navigation Bar

Navigation menu किसी भी website की backbone होता है। Modern menus Flexbox से आसानी से बनते व responsive होते हैं।

1️⃣ HTML Structure

🌐 nav menu markup

<nav class="menu">
  <a href="#" class="active">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

2️⃣ CSS Styling (Flexbox + Hover + Active + Responsive)

🎨 full menu styling

nav.menu{
  display:flex; justify-content:center; background:#1f4ad1;
  padding:12px 0; flex-wrap:wrap;
}
nav.menu a{
  color:#fff; text-decoration:none; padding:10px 20px; transition:all .3s ease;
}
nav.menu a:hover{ background:#0b3ea9; border-radius:6px; }
nav.menu a.active{ background:#fff; color:#1f4ad1; border-radius:6px; }

@media (max-width:600px){
  nav.menu{ flex-direction:column; align-items:center; }
  nav.menu a{ display:block; width:100%; text-align:center; }
}

display:flex — items horizontally align करता है।
justify-content:center — menu को center में रखता है।
:hover — mouse जाने पर highlight effect।
.active — current page दिखाने के लिए।

⚙️ Exam Tip: Practical में menu design question में hover effect व active link ज़रूर दिखाएँ।

Exam Point: Menu bar flexbox से बनता है (display:flex + justify-content)। :hover व .active class से interactivity; @media query से mobile पर column में stack।

4.14

CSS Image Gallery — Responsive Grid + Hover Zoom

Image galleries website को attractive बनाती हैं। CSS Grid से responsive gallery व hover zoom effects से interaction बढ़ाया जा सकता है।

1️⃣ HTML Structure

🌐 gallery markup

<div class="gallery">
  <img src="photo1.jpg" alt="Nature 1">
  <img src="photo2.jpg" alt="Nature 2">
  <img src="photo3.jpg" alt="Nature 3">
</div>

2️⃣ CSS Grid + Hover Zoom

🎨 responsive grid gallery

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:15px; padding:20px;
}
.gallery img{
  width:100%; height:180px; object-fit:cover; border-radius:10px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.gallery img:hover{
  transform:scale(1.05);
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}

display:grid — layout बनाने के लिए।
grid-template-columns: repeat(auto-fit, minmax()) — responsive gallery, screen के अनुसार columns खुद adjust।
object-fit:cover — images को proportion में crop करना।
transform:scale() — zoom effect।

💡 Practical Tip: Mobile-friendly design के लिए max-width:100% रखना न भूलें।

Exam Point: auto-fit + minmax() से gallery बिना media query के responsive बनती है। object-fit:cover image को crop करके fixed box में fit करता है, aspect ratio नहीं बिगड़ता।

4.15

Summary — Quick Revision (Exam से पहले पढ़ें)

CSS = presentation language; syntax: selector { property: value; }।
Types: Inline (style=""), Internal (head में style tag), External (.css file — recommended)।
Selectors: Universal(*), Tag, Class(.), ID(#), Descendant, Child(>), Attribute([]), Group(,), Pseudo-class(:), Pseudo-element(::)। Specificity: Universal<Tag<Class<ID<Inline।
Units: px(fixed), %(parent के अनुसार), em(parent font), rem(root font)।
Box Model: content→padding→border→margin; box-sizing:border-box से width सही रहती है।
Display: block/inline/inline-block/flex/grid/none; visibility:hidden जगह रखता है, display:none नहीं।
Positioning: static, relative(offset), absolute(ancestor), fixed(viewport), sticky(scroll threshold)।
Flexbox: display:flex; justify-content=main axis, align-items=cross axis।
Float/Clear: legacy layout; clearfix से parent collapse ठीक होता है।
Effects: box-shadow, opacity, transition — smooth hover animations।
Lists: list-style-type/position/image से bullets control होते हैं।
Tables: border-collapse, nth-child(even) zebra, overflow-x:auto responsive।
Menu: flexbox + :hover + .active + media query से responsive nav बनता है।
Gallery: CSS Grid auto-fit/minmax + object-fit:cover + hover scale zoom।

4.16

Model Questions — 50 MCQs + 15 Theory Questions

❓ A. Multiple Choice Questions (50)

#	प्रश्न व उत्तर
1	CSS का पूरा नाम है — (a) Creative Style Sheets(b) Cascading Style Sheets(c) Computer Style Sheets(d) Colorful Style Sheets ✔ सही उत्तर: (b) Cascading Style Sheets
2	CSS मुख्यतः control करती है — (a) content(b) design व layout(c) database(d) server logic ✔ सही उत्तर: (b) design व layout
3	CSS का basic syntax है — (a) selector{property:value;}(b) property{selector:value;}(c) value{selector:property;}(d) tag(property=value) ✔ सही उत्तर: (a) selector{property:value;}
4	Element के अंदर style="" attribute से लगाई CSS — (a) Internal(b) External(c) Inline(d) Embedded ✔ सही उत्तर: (c) Inline
5	head में <style> tag से लगाई CSS कहलाती है — (a) Inline(b) Internal(c) External(d) Global ✔ सही उत्तर: (b) Internal
6	सबसे recommended CSS type है — (a) Inline(b) Internal(c) External(d) कोई भी ✔ सही उत्तर: (c) Externalreusable व maintainable।
7	External CSS file जोड़ने का tag — (a) <style>(b) <link>(c) <script>(d) <css> ✔ सही उत्तर: (b) <link>
8	सभी elements select करने वाला selector — (a) .class(b) #id(c) (d) & ✔ सही उत्तर: (c)
9	Class selector का symbol है — (a) #(b) .(c) *(d) > ✔ सही उत्तर: (b) .
10	ID selector का symbol है — (a) .(b) #(c) @(d) $ ✔ सही उत्तर: (b) #
11	एक page पर ID होनी चाहिए — (a) कई बार repeat(b) unique (एक बार)(c) ज़रूरी नहीं(d) सिर्फ body में ✔ सही उत्तर: (b) unique (एक बार)
12	div p{} किस प्रकार का selector है? (a) Child(b) Descendant(c) Sibling(d) Attribute ✔ सही उत्तर: (b) Descendant
13	div>p{} केवल किन elements पर लागू होता है? (a) सभी descendants(b) केवल direct child(c) siblings(d) parent खुद ✔ सही उत्तर: (b) केवल direct child
14	h2+p{} selector target करता है — (a) सभी p siblings(b) just next sibling p(c) h2 के अंदर p(d) h2 से पहले वाला p ✔ सही उत्तर: (b) just next sibling p
15	a[href^="https"] selector किसे target करता है? (a) href जो https से शुरू हो(b) href जो https पर खत्म हो(c) href में https हो कहीं भी(d) सभी links ✔ सही उत्तर: (a) href जो https से शुरू हो
16	a[href$=".pdf"] selector किसे target करता है? (a) .pdf से शुरू href(b) .pdf पर खत्म href(c) href में pdf शब्द हो(d) कोई नहीं ✔ सही उत्तर: (b) .pdf पर खत्म href
17	h1,h2,h3{} किस प्रकार का selector है? (a) Group(b) Child(c) Descendant(d) Universal ✔ सही उत्तर: (a) Group
18	Mouse hover पर style लगाने के लिए — (a) :focus(b) :hover(c) :active(d) :visited ✔ सही उत्तर: (b) :hover
19	Element से पहले content जोड़ने के लिए pseudo-element — (a) ::after(b) ::before(c) ::first-line(d) ::selection ✔ सही उत्तर: (b) ::before
20	CSS specificity में सबसे ज़्यादा weight किसकी है? (a) Universal(b) Tag(c) Class(d) Inline ✔ सही उत्तर: (d) Inline
21	rem unit आधारित है — (a) parent font-size पर(b) root font-size पर(c) viewport width पर(d) screen height पर ✔ सही उत्तर: (b) root font-size पर
22	rgba() में चौथा value दर्शाता है — (a) red intensity(b) opacity(c) brightness(d) hue ✔ सही उत्तर: (b) opacity
23	Lines के बीच spacing के लिए property — (a) letter-spacing(b) word-spacing(c) line-height(d) text-indent ✔ सही उत्तर: (c) line-height
24	Text को uppercase दिखाने के लिए — (a) text-align(b) text-transform(c) text-decoration(d) font-style ✔ सही उत्तर: (b) text-transform
25	Background image को पूरे क्षेत्र में crop करके भरने के लिए — (a) contain(b) cover(c) auto(d) repeat ✔ सही उत्तर: (b) cover
26	Box model में सबसे बाहरी layer है — (a) content(b) padding(c) border(d) margin ✔ सही उत्तर: (d) margin
27	Width में padding व border शामिल करने के लिए — (a) box-sizing:content-box(b) box-sizing:border-box(c) box-sizing:auto(d) box-sizing:none ✔ सही उत्तर: (b) box-sizing:border-box
28	Border के बाहर draw होता है और layout प्रभावित नहीं करता — (a) border(b) margin(c) outline(d) padding ✔ सही उत्तर: (c) outline
29	display:none किया गया element — (a) जगह रखता है पर दिखता नहीं(b) जगह भी नहीं रखता(c) सिर्फ पारदर्शी होता है(d) कोई असर नहीं ✔ सही उत्तर: (b) जगह भी नहीं रखता
30	visibility:hidden किया गया element — (a) जगह रखता है पर invisible होता है(b) जगह भी हटा देता है(c) दिखता रहता है(d) क्रैश करता है ✔ सही उत्तर: (a) जगह रखता है पर invisible होता है
31	inline-block element में क्या मान्य होता है? (a) कुछ नहीं(b) width व height(c) सिर्फ color(d) सिर्फ margin ✔ सही उत्तर: (b) width व height
32	position:relative से element — (a) अपने original स्थान से offset होता है(b) viewport से चिपकता है(c) flow से पूरी तरह बाहर होता है(d) कोई असर नहीं ✔ सही उत्तर: (a) अपने original स्थान से offset होता है
33	position:absolute किसके सापेक्ष position होता है? (a) viewport(b) nearest positioned ancestor(c) body हमेशा(d) window ✔ सही उत्तर: (b) nearest positioned ancestor
34	Scroll पर भी viewport से चिपका रहता है — (a) static(b) relative(c) fixed(d) inherit ✔ सही उत्तर: (c) fixed
35	Scroll तक normal, फिर threshold पर stick होता है — (a) sticky(b) absolute(c) static(d) fixed ✔ सही उत्तर: (a) sticky
36	Stacking order तय करने वाली property — (a) z-index(b) order(c) stack(d) layer ✔ सही उत्तर: (a) z-index
37	Flex container बनाने के लिए — (a) display:block(b) display:flex(c) display:inline(d) position:flex ✔ सही उत्तर: (b) display:flex
38	Flexbox में main axis alignment के लिए — (a) align-items(b) justify-content(c) flex-wrap(d) gap ✔ सही उत्तर: (b) justify-content
39	Flexbox में cross axis alignment के लिए — (a) justify-content(b) align-items(c) flex-direction(d) order ✔ सही उत्तर: (b) align-items
40	Flex items के बीच spacing देने के लिए — (a) gap(b) space(c) margin-auto(d) padding ✔ सही उत्तर: (a) gap
41	float:left का मूल उद्देश्य था — (a) images के आसपास text wrap(b) center alignment(c) grid बनाना(d) animation ✔ सही उत्तर: (a) images के आसपास text wrap
42	Float के कारण parent collapse ठीक करने के लिए — (a) clearfix(b) box-sizing(c) overflow:visible(d) z-index ✔ सही उत्तर: (a) clearfix
43	Smooth hover animation के लिए property — (a) transition(b) position(c) float(d) clear ✔ सही उत्तर: (a) transition
44	opacity:0.5 का मतलब है — (a) पूरी तरह transparent(b) आधा transparent(c) पूरी तरह opaque(d) hidden ✔ सही उत्तर: (b) आधा transparent
45	List bullets के shape बदलने के लिए — (a) list-style-type(b) list-position(c) bullet-style(d) list-shape ✔ सही उत्तर: (a) list-style-type
46	Table की double borders को एक line में मर्ज करता है — (a) border-spacing(b) border-collapse:collapse(c) border:none(d) cellpadding ✔ सही उत्तर: (b) border-collapse:collapse
47	Alternate row color (zebra effect) के लिए — (a) :first-child(b) :nth-child(even)(c) :last-child(d) :only-child ✔ सही उत्तर: (b) :nth-child(even)
48	Responsive navigation menu बनाने के लिए मुख्य property — (a) display:flex(b) display:table(c) position:static(d) float:none ✔ सही उत्तर: (a) display:flex
49	Image gallery grid बनाने के लिए property — (a) display:grid(b) display:list(c) display:table-row(d) float:grid ✔ सही उत्तर: (a) display:grid
50	Image को box में crop करके fit करने के लिए — (a) object-fit:cover(b) object-fit:none(c) background-size:auto(d) image-crop:true ✔ सही उत्तर: (a) object-fit:cover

📝 B. 15 Theory Questions (Short Answers)

CSS क्या है? इसकी syntax लिखिए।CSS एक stylesheet language है जो HTML elements के design, layout व formatting control करती है। Syntax: selector { property: value; }।
CSS के तीन types कौन-से हैं? कब कौन-सा उपयोग करें?Inline (style attribute, quick fixes), Internal (head में style tag, single page), External (.css file + link, पूरी site के लिए recommended)।
Class selector और ID selector में अंतर बताइए।Class (.name) कई elements पर reuse हो सकता है। ID (#name) एक page में केवल एक बार, uniquely identified element के लिए। ID की specificity ज़्यादा है।
Descendant व Child selector में अंतर लिखिए।Descendant (parent child) — parent के अंदर कितनी भी गहराई के सभी matching elements। Child (parent>child) — केवल immediate/direct children।
rem और em unit में अंतर बताइए।em parent element के font-size के अनुसार calculate होता है (nested होने पर compound हो सकता है)। rem हमेशा root (html) के font-size पर आधारित होता है — पूरी site में consistent रहता है।
CSS Box Model समझाइए।हर element चार layers से बनता है — content (सबसे अंदर), padding (content के चारों ओर), border, व margin (सबसे बाहर, element को दूसरों से अलग रखता है)।
box-sizing:border-box का क्या फायदा है?इससे element की total width में padding व border अपने आप शामिल हो जाते हैं — width सेट करना व layout calculate करना आसान होता है, extra calculation नहीं करनी पड़ती।
display:none और visibility:hidden में अंतर लिखिए।display:none element को DOM व layout दोनों से हटा देता है — कोई जगह नहीं लेता। visibility:hidden element को invisible बनाता है पर उसकी जगह (space) बनी रहती है।
CSS positioning के 5 values समझाइए।static (default flow), relative (अपने स्थान से offset, जगह रहती है), absolute (positioned ancestor के अनुसार, flow से बाहर), fixed (viewport से चिपका), sticky (scroll तक normal फिर stick)।
Flexbox में justify-content व align-items का फर्क बताइए।justify-content main axis (जैसे row में horizontal) पर items align करता है — start/center/space-between। align-items cross axis (vertical) पर align करता है — stretch/center।
float व clearfix के बारे में लिखिए।float:left/right element को side में ले जाकर बाकी content को उसके चारों ओर wrap कराता है। Floated elements parent की height में count नहीं होते, इसलिए parent पर clearfix (::after content clear:both) लगाना पड़ता है।
CSS transition property का उपयोग समझाइए।transition से किसी property में बदलाव (जैसे hover पर color या transform) अचानक न होकर smoothly, समय के साथ होता है। Syntax: transition: property duration timing-function।
CSS से table को responsive कैसे बनाएँ?Table को एक wrapper div में रखें जिसमें overflow-x:auto व display:block हो — इससे छोटी screen पर table horizontal scroll हो जाती है, layout नहीं टूटता।
Flexbox से responsive navigation menu कैसे बनाएँ?nav पर display:flex व justify-content:center लगाएँ; links पर padding व hover effect दें; media query में flex-direction:column से mobile पर menu vertically stack हो जाता है।
CSS Grid से responsive image gallery कैसे बनाएँ?grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) से columns screen width के अनुसार खुद adjust होते हैं। object-fit:cover से images बिना distort हुए fixed box में fit होती हैं।

Revision Tip: तीन CSS types, selector symbols (./#/*), Box Model क्रम, display:none vs visibility:hidden, positioning के 5 values, व flexbox के justify-content/align-items — ये facts इस chapter के आधे MCQs cover कर देते हैं।

FAQ

अक्सर पूछे जाने वाले प्रश्न

CSS क्या है?

CSS (Cascading Style Sheets) एक stylesheet language है जो HTML elements के design, layout व formatting को control करती है। HTML structure देता है जबकि CSS presentation तय करती है।

CSS के types कितने होते हैं?

CSS के तीन types होते हैं — Inline CSS (element के अंदर style attribute से), Internal CSS (head में style tag से), और External CSS (अलग .css file से link करके, सबसे recommended)।

CSS Selectors क्या हैं?

Selectors HTML elements को target करने के लिए उपयोग होते हैं ताकि उन पर CSS style apply की जा सके। मुख्य types — Universal, Tag, Class, ID, Descendant, Child, Attribute, Group, Pseudo-class व Pseudo-element।

CSS Box Model क्या है?

हर HTML element चार layers से बनता है — content, padding, border व margin। box-sizing: border-box लगाने से width में padding व border शामिल हो जाते हैं, जिससे layout आसान होता है।

CSS Flexbox क्या है?

Flexbox एक-dimension (row या column) में items को align व distribute करने का modern तरीका है। Parent पर display:flex लगाकर justify-content, align-items व gap जैसी properties से layout control होता है।

CSS Positioning के types क्या हैं?

CSS positioning के 5 types हैं — static (default), relative (offset from original position), absolute (nearest positioned ancestor के अनुसार), fixed (viewport से चिपका) व sticky (scroll तक normal, फिर stick)।

🎯 Chapter 4 पूरा हुआ! अब आगे बढ़ें

Chapter 5 में CSS Frameworks — Bootstrap व W3.CSS की मदद से तेज़ी से responsive websites बनाना सीखेंगे।

Chapter 5 पढ़ें ➜