⚠ यह कार्रवाई अनुमति नहीं है!
🧰 NIELIT O Level · M2-R5 Web Design · Hindi Notes

Chapter 5: CSS Framework (W3.CSS) — तेज़ी से Responsive Design

अब ready-made tools से तेज़ web design! इस chapter में — W3.CSS Introduction, Colors, Containers, Panels, Borders, Fonts, Text formatting, Grid व Layout System, Navigation Bars, Buttons, Forms व Animations — 40+ examples के साथ, हर code में Copy button!

📑 13 Topics 💻 40+ Examples 📊 Grid Diagram ❓ 50 MCQs + Theory 🗓 Updated 2026
🏠 O Level Home 📘 Paid PDF Course 🧩 Free Mock Test
👉 सभी chapters देखने के लिए swipe करें
📑 Table of Contents — किसी भी topic पर सीधे जाएँ
5.0

W3.CSS Introduction — हल्का व Modern Framework

W3.CSS एक आधुनिक व हल्का CSS Framework है, जिसे W3Schools ने बनाया। यह पूरी तरह Pure CSS पर आधारित है — किसी JavaScript library (jQuery/Bootstrap JS) की ज़रूरत नहीं होती।

✨ Key Features

  • Lightweight: file size बहुत छोटा (~30KB) — website जल्दी load होती है।
  • Responsive: mobile-first approach — हर screen के अनुसार layout adjust।
  • No External JS: किसी JavaScript library की dependency नहीं।
  • Modern Look: cards, panels, colors, grids पहले से शामिल।
  • Free व Open Source: कोई licensing की ज़रूरत नहीं।

📘 W3.CSS को Page में जोड़ना

🧰 CDN link से W3.CSS शामिल करना
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">
  <header class="w3-container w3-blue w3-padding-16">
    <h1>Welcome to W3.CSS</h1>
  </header>
</body>

🧠 Code Explanation

Classकाम
w3-containerpadding व proper spacing देता है
w3-bluebackground को नीला बनाता है
w3-cardshadow effect के साथ card-like box
w3-row-padding / w3-colresponsive grid layout के लिए
Exam Point: W3.CSS = pure CSS framework (W3Schools द्वारा), JavaScript dependency नहीं। CDN link एक <link> tag से जुड़ता है — इसका file size लगभग 30KB है।
5.1

W3.CSS Colors — रंगों का सरल प्रयोग

W3.CSS predefined color classes देता है जैसे w3-red, w3-blue, w3-green — HEX/RGB values याद रखने की ज़रूरत नहीं, सिर्फ class name जोड़ना है।

🎨 Color Class Structure

Syntax: w3-[color-name] (background के लिए) व w3-text-[color-name] (text के लिए)।

🧰 basic background colors
<div class="w3-container w3-red w3-padding">Red Background</div>
<div class="w3-container w3-blue w3-padding">Blue Background</div>
<div class="w3-container w3-yellow w3-padding w3-text-black">Yellow with Black Text</div>

💡 Shades — Pale, Light, Dark

हर color के कई shades उपलब्ध हैं — w3-pale-red, w3-light-blue, w3-dark-green।

🧰 color shades
<div class="w3-container w3-pale-red w3-padding">Pale Red</div>
<div class="w3-container w3-dark-green w3-padding">Dark Green</div>

🌈 Color Themes

W3.CSS में predefined themes भी मिलते हैं — w3-theme, w3-theme-l1 (light), w3-theme-d1 (dark) — पूरे layout पर apply होते हैं।

🧰 theme file जोड़ना
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<div class="w3-container w3-theme">Theme Example</div>
💡 Note: Contrast का ध्यान रखें — light background पर dark text व dark background पर light text रखें।
Exam Point: w3-[color] = background; w3-text-[color] = text color; w3-pale-[color] = light shade। Theme files से पूरी site की color scheme एक जगह से बदली जा सकती है।
5.2

W3.CSS Containers — Layout को व्यवस्थित करना

w3-container class HTML elements के बीच automatic padding, margin व alignment देती है — webpage को neat व responsive बनाती है।

🔹 Basic Syntax

🧰 container basic use
<div class="w3-container">
  Content Here
</div>

🧱 Nested Containers

🧰 container के अंदर container
<div class="w3-container w3-pale-green w3-padding">
  <h3>Main Container</h3>
  <div class="w3-container w3-white w3-border w3-round">
    <p>Nested container inside main.</p>
  </div>
</div>

📐 Alignment

Classकाम
w3-centercontent center में लाता है
w3-leftcontent left aligned रखता है
w3-rightcontent right aligned रखता है
Exam Point: w3-container का मुख्य काम padding+margin+alignment देना है। w3-content fixed max-width (980px) वाला centered container है।
5.3

W3.CSS Panels — Notifications व Info Blocks

w3-panel class किसी content को highlight या अलग section में दिखाने के लिए उपयोग होती है — notifications, messages, quotes के लिए उपयुक्त।
🧰 basic panels
<div class="w3-panel w3-blue w3-leftbar w3-border-blue">
  <p>This is a simple blue panel.</p>
</div>

<div class="w3-panel w3-pale-green w3-border w3-border-green w3-round">
  <h4>✅ Success!</h4>
  <p>Your data has been saved successfully.</p>
</div>

🎨 Panel Modifiers

Classकाम
w3-leftbarबाईं तरफ रंगीन bar
w3-borderपूरे चारों ओर border
w3-pale-*हल्का background color
w3-roundrounded corners
💡 Use Cases: Form success/error messages, notifications, tips/reminders, quote/highlight boxes।
Exam Point: w3-panel = information block; w3-leftbar/rightbar/topbar/bottombar से सिर्फ एक side पर bar; success (green) व error (red) messages के लिए बहुत common।
5.4

W3.CSS Borders — बिना Custom CSS के Border

Traditional CSS में border: 2px solid black; लिखना पड़ता था — W3.CSS में सिर्फ class जोड़नी है, जैसे w3-border या w3-border-red।

✨ Important Border Classes

Classकाम
w3-borderdefault black thin border
w3-border-[color]border का रंग बदलता है
w3-round / w3-round-large / w3-round-xlargeअलग-अलग स्तर के rounded corners
w3-leftbar/rightbar/topbar/bottombarसिर्फ एक साइड में border
🧰 border styles combo
<div class="w3-container w3-border w3-border-blue w3-round-large w3-padding">
  Blue border with rounded corners
</div>

<div class="w3-panel w3-leftbar w3-border-green">
  Left bar with green color
</div>
Exam Point: w3-border+w3-border-[color] = colored border; roundness classes — small→large→xlarge→xxlarge (आखिरी = पूरी तरह circular)। One-sided bars headings/quotes में common हैं।
5.5

W3.CSS Fonts — Typography Control

W3.CSS default रूप से "Segoe UI", Arial, sans-serif उपयोग करता है, पर font family, size व color के लिए predefined classes भी देता है।

✨ Font Classes

Classकाम
w3-serifTraditional serif font (Times New Roman)
w3-sans-serifClean modern font (Arial, Segoe UI)
w3-monospaceCode-like font (Courier New)
w3-small / w3-large / w3-xlargefont size छोटा/बड़ा करना
w3-wideletters के बीच फैलाव
w3-text-[color]text का रंग बदलना
🧰 font family व size demo
<h3 class="w3-serif">Serif Font</h3>
<h3 class="w3-monospace">Monospace Font</h3>
<h4 class="w3-xlarge w3-wide w3-text-purple">Large Wide Purple Text</h4>

📗 Google Fonts जोड़ना

🧰 custom Google Font
<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
<style>
  .custom-font { font-family: 'Roboto', sans-serif; }
</style>
<h3 class="custom-font w3-text-blue">Roboto Font Text</h3>
Exam Point: W3.CSS default font family Segoe UI/Arial है। w3-serif/w3-sans-serif/w3-monospace से पूरी font family बदलती है; w3-small से w3-xxlarge तक size steps।
5.6

W3.CSS Text Formatting — Alignment, Transform व Decoration

Text को readable व attractive बनाने के लिए W3.CSS में alignment, color, transformation व decoration की predefined classes हैं।

↔️ Text Alignment

🧰 left/center/right/justify
<p class="w3-left">Left Aligned</p>
<p class="w3-center">Center Aligned</p>
<p class="w3-justify">Justified text spreads evenly across full width.</p>

🔠 Text Transform

Classकाम
w3-uppercaseसभी अक्षर CAPITAL
w3-lowercaseसभी अक्षर छोटे
w3-capitalizeहर शब्द का पहला अक्षर capital

🖋️ Text Decoration

🧰 underline, overline, strikethrough
<p class="w3-underline">Underlined Text</p>
<p class="w3-line-through">Strikethrough Text</p>
<h2 class="w3-text-shadow w3-text-blue">Shadow Text</h2>
💡 Tip: w3-center vs w3-justify — center सिर्फ बीच में लाता है, justify पूरी width में evenly फैला देता है।
Exam Point: Alignment — left/center/right/justify; Transform — uppercase/lowercase/capitalize; Decoration — underline/overline/line-through। w3-text-shadow headings को 3D look देता है।
5.7

Grid & Layout System — Responsive Columns

Responsive layout के लिए W3.CSS row व column structure देता है — w3-row के अंदर w3-col classes से grid बनता है।

🔹 Basic Structure

🧰 grid basic syntax
<div class="w3-row">
  <div class="w3-col s12 m6 l4">Column 1</div>
  <div class="w3-col s12 m6 l8">Column 2</div>
</div>

Grid Prefix — s / m / l का मतलब

s (small)Mobile — 12 col m (medium)Tablet — जैसे 6 l (large)Desktop — जैसे 4 w3-col s12 m6 l4 — कुल 12 columns में से हिस्सा Mobile पर पूरी width (12), Tablet पर आधी (6), Desktop पर 1/3 (4)

यहाँ: s12 = small devices (mobile) के लिए 12 columns (full width); m6 = medium (tablet) के लिए 6 columns; l4 = large (desktop) के लिए 4 columns।

🧰 3-column responsive layout
<div class="w3-row-padding w3-margin">
  <div class="w3-col s12 m4 l4 w3-pale-red w3-padding">
    <h3>Left Column</h3>
  </div>
  <div class="w3-col s12 m4 l4 w3-pale-green w3-padding">
    <h3>Middle Column</h3>
  </div>
  <div class="w3-col s12 m4 l4 w3-pale-blue w3-padding">
    <h3>Right Column</h3>
  </div>
</div>

🎨 Responsive Layout Tips

  • हमेशा columns को w3-row या w3-row-padding में wrap करें।
  • w3-mobile class small screens पर elements को full width कर देती है।
  • w3-hide-small/w3-hide-large से visibility control होती है।
Exam Point: Grid = 12-column system। s/m/l prefix screen size दर्शाते हैं (small/medium/large)। w3-row-padding columns के बीच gap देता है, w3-row नहीं देता।
5.8

W3.CSS Navigation Bars — Menu Design

Navigation bar website का सबसे ज़रूरी हिस्सा है। W3.CSS predefined classes से सुंदर व responsive menu बनता है — बिना custom CSS के।

✨ Navigation Classes

Classकाम
w3-barHorizontal navigation bar बनाता है
w3-bar-itemNavigation item/link define करता है
w3-buttonButton-style links बनाता है
w3-mobileMenu को mobile-friendly बनाता है
w3-dropdown-hover/clickDropdown menu बनाता है
🧰 basic horizontal navbar
<div class="w3-bar w3-blue">
  <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">About</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Contact</a>
</div>

🧭 Dropdown Menu

🧰 dropdown submenu
<div class="w3-bar w3-black">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <div class="w3-dropdown-hover">
    <button class="w3-button">Courses ▾</button>
    <div class="w3-dropdown-content w3-bar-block w3-card-4">
      <a href="#" class="w3-bar-item w3-button">HTML</a>
      <a href="#" class="w3-bar-item w3-button">CSS</a>
    </div>
  </div>
</div>

📱 Responsive Navigation (Mobile)

🧰 mobile-hidden vertical menu
<div class="w3-bar-block w3-hide-large w3-hide-medium w3-blue">
  <a href="#" class="w3-bar-item w3-button">Home</a>
  <a href="#" class="w3-bar-item w3-button">Courses</a>
</div>
Exam Point: w3-bar+w3-bar-item = navbar का आधार। w3-dropdown-hover से mouse hover पर submenu खुलता है। w3-hide-small/large से responsive visibility control होती है।
5.9

W3.CSS Buttons — Action Elements

Buttons user actions (submit, login, delete आदि) के लिए होते हैं। W3.CSS predefined button classes से इन्हें professional look मिलता है।

✨ Button Classes

Classकाम
w3-buttonBasic button class
w3-roundRounded corner button
w3-blockFull width button
w3-disabledDisabled state
🧰 button variations
<button class="w3-button w3-blue">Blue Button</button>
<button class="w3-button w3-green w3-round">Rounded Button</button>
<button class="w3-button w3-red w3-block">Full Width Button</button>
<button class="w3-button w3-grey w3-disabled">Disabled</button>
💡 Tip: Colors से action का meaning साफ़ करें — green=Save/Success, red=Delete/Error, yellow=Warning।
Exam Point: w3-button = base button class; w3-block full width बनाता है; w3-disabled से button click करने योग्य नहीं रहता।
5.10

W3.CSS Forms — User Input Design

Forms user data collect करने का सबसे अच्छा तरीका हैं। W3.CSS forms को simple व responsive बनाने के लिए classes देता है।

✨ Common Form Classes

Classकाम
w3-inputInput fields के लिए
w3-selectDropdown menu के लिए
w3-borderBorder वाला field
w3-roundRounded corners

📋 Contact Form Example

🧰 contact form
<div class="w3-container w3-card w3-light-grey w3-padding">
  <h3>Contact Form</h3>
  <form class="w3-container">
    <label class="w3-text-blue"><b>Name</b></label>
    <input class="w3-input w3-border w3-round" type="text" placeholder="Enter your name">

    <label class="w3-text-blue"><b>Email</b></label>
    <input class="w3-input w3-border w3-round" type="email" placeholder="Enter your email">

    <button class="w3-button w3-green w3-margin-top">Submit</button>
  </form>
</div>

🔽 Dropdown व Radio Buttons

🧰 select व radio
<select class="w3-select w3-border">
  <option value="" disabled selected>Choose your course</option>
  <option>HTML</option>
  <option>CSS</option>
</select>

<input class="w3-radio" type="radio" name="gender" value="Male"> Male
<input class="w3-radio" type="radio" name="gender" value="Female"> Female
Exam Point: w3-input सभी text/email/password fields पर लगता है; w3-select dropdown के लिए; w3-radio radio buttons के लिए। Form styling के लिए हमेशा w3-border साथ में लगाएँ।
5.11

W3.CSS Animations & Transitions — Interactive Effects

Transition किसी property के value बदलने पर smooth change देता है (जैसे hover)। Animation keyframes पर आधारित predefined motion है।

✨ Common Animation Classes

Classकाम
w3-animate-top/bottomऊपर/नीचे से slide होकर आता है
w3-animate-left/rightबाएँ/दाएँ से slide होता है
w3-animate-opacityFade-in effect
w3-animate-zoomZoom-in effect
w3-animate-fadingलगातार fade in/out
🧰 slide व zoom animations
<div class="w3-container w3-center w3-animate-top w3-blue w3-padding">
  <h2>Slide from Top</h2>
</div>

<div class="w3-container w3-center w3-animate-zoom w3-orange w3-padding">
  <h2>Zoom In Animation</h2>
</div>

🖱️ Hover Transition (Custom CSS के साथ)

🧰 smooth hover transition
<style>
  .hover-box{ transition: transform 0.5s, background 0.5s; }
  .hover-box:hover{ transform: scale(1.1); background:#00bcd4; color:#fff; }
</style>
<div class="w3-container w3-center w3-padding hover-box w3-light-grey">
  <h3>Hover Over Me</h3>
</div>

⚙️ Custom Duration

Default animation duration 0.6s होती है, पर आप w3-animate-slow (2s) व w3-animate-fast (0.3s) से बदल सकते हैं।

💡 Note: Animation को balance में उपयोग करें — बहुत ज़्यादा motion user experience खराब कर सकता है।
Exam Point: Transition = property बदलने पर smooth change (hover के साथ)। Animation = predefined keyframe motion (w3-animate-*)। w3-animate-opacity व w3-animate-zoom सबसे common हैं।
5.12

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

  • W3.CSS = lightweight (~30KB), pure CSS framework by W3Schools; कोई JS dependency नहीं।
  • Include: <link rel="stylesheet" href=".../w3.css"> head में।
  • Colors: w3-[color] (background), w3-text-[color] (text), w3-pale-[color] (light shade)।
  • Containers: w3-container automatic padding/margin/alignment देता है।
  • Panels: notifications/messages के लिए; w3-leftbar से one-sided bar।
  • Borders: w3-border+w3-border-[color]; roundness — small→large→xlarge→xxlarge।
  • Fonts: w3-serif/sans-serif/monospace; w3-small से w3-xxlarge तक size।
  • Text: alignment (left/center/right/justify), transform (uppercase/lowercase/capitalize)।
  • Grid: w3-row + w3-col s/m/l (12-column system); s=mobile, m=tablet, l=desktop।
  • Navbar: w3-bar+w3-bar-item; w3-dropdown-hover से submenu; w3-hide-small responsive।
  • Buttons: w3-button; w3-block full width; w3-disabled non-clickable।
  • Forms: w3-input, w3-select, w3-radio — w3-border के साथ।
  • Animations: w3-animate-top/left/zoom/opacity; w3-animate-slow/fast से duration।
5.13

Model Questions — 50 MCQs + 15 Theory Questions

❓ A. Multiple Choice Questions (50)

1

W3.CSS किसने विकसित किया?

(a) Google(b) W3Schools(c) Microsoft(d) Mozilla
✔ सही उत्तर: (b) W3Schools
2

W3.CSS किस पर आधारित है?

(a) jQuery(b) Pure CSS(c) React(d) PHP
✔ सही उत्तर: (b) Pure CSS
3

W3.CSS का approximate file size है —

(a) 3MB(b) 300KB(c) ~30KB(d) 3KB
✔ सही उत्तर: (c) ~30KB
4

W3.CSS include करने के लिए tag —

(a) <script>(b) <link>(c) <style>(d) <css>
✔ सही उत्तर: (b) <link>
5

Background को नीला करने वाली class —

(a) w3-text-blue(b) w3-blue(c) w3-border-blue(d) blue-bg
✔ सही उत्तर: (b) w3-blue
6

केवल text का रंग बदलने वाली class —

(a) w3-blue(b) w3-text-blue(c) w3-border-blue(d) w3-pale-blue
✔ सही उत्तर: (b) w3-text-blue
7

Light shade background के लिए —

(a) w3-dark-red(b) w3-pale-red(c) w3-text-red(d) w3-red-heavy
✔ सही उत्तर: (b) w3-pale-red
8

Elements को padding व alignment देने वाली class —

(a) w3-container(b) w3-panel(c) w3-border(d) w3-card
✔ सही उत्तर: (a) w3-container
9

Fixed max-width (980px) वाला container —

(a) w3-container(b) w3-content(c) w3-panel(d) w3-row
✔ सही उत्तर: (b) w3-content
10

Notifications/messages दिखाने के लिए class —

(a) w3-panel(b) w3-container(c) w3-bar(d) w3-card
✔ सही उत्तर: (a) w3-panel
11

बाईं तरफ रंगीन bar देने वाली class —

(a) w3-topbar(b) w3-leftbar(c) w3-rightbar(d) w3-bottombar
✔ सही उत्तर: (b) w3-leftbar
12

Default border देने वाली class —

(a) w3-border(b) w3-round(c) w3-panel(d) w3-bar
✔ सही उत्तर: (a) w3-border
13

सबसे ज़्यादा round (circular) corners देने वाली class —

(a) w3-round(b) w3-round-large(c) w3-round-xlarge(d) w3-round-xxlarge
✔ सही उत्तर: (d) w3-round-xxlarge
14

Traditional serif font देने वाली class —

(a) w3-sans-serif(b) w3-serif(c) w3-monospace(d) w3-wide
✔ सही उत्तर: (b) w3-serif
15

Code जैसा दिखने वाला font —

(a) w3-serif(b) w3-sans-serif(c) w3-monospace(d) w3-wide
✔ सही उत्तर: (c) w3-monospace
16

Letters को फैला हुआ दिखाने वाली class —

(a) w3-wide(b) w3-large(c) w3-small(d) w3-xlarge
✔ सही उत्तर: (a) w3-wide
17

Text को center align करने वाली class —

(a) w3-left(b) w3-center(c) w3-right(d) w3-justify
✔ सही उत्तर: (b) w3-center
18

Text को evenly spread करने वाली class —

(a) w3-center(b) w3-justify(c) w3-wide(d) w3-left
✔ सही उत्तर: (b) w3-justify
19

सभी अक्षर CAPITAL में दिखाने वाली class —

(a) w3-capitalize(b) w3-lowercase(c) w3-uppercase(d) w3-large
✔ सही उत्तर: (c) w3-uppercase
20

हर शब्द का पहला अक्षर capital करने वाली class —

(a) w3-capitalize(b) w3-uppercase(c) w3-lowercase(d) w3-wide
✔ सही उत्तर: (a) w3-capitalize
21

Grid rows बनाने के लिए class —

(a) w3-col(b) w3-row(c) w3-container(d) w3-bar
✔ सही उत्तर: (b) w3-row
22

Grid columns बनाने के लिए class —

(a) w3-row(b) w3-col(c) w3-panel(d) w3-card
✔ सही उत्तर: (b) w3-col
23

Grid system कुल कितने columns का होता है?

(a) 10(b) 12(c) 16(d) 24
✔ सही उत्तर: (b) 12
24

's' prefix (जैसे s12) किस screen के लिए है?

(a) Desktop(b) Small/Mobile(c) Tablet(d) Print
✔ सही उत्तर: (b) Small/Mobile
25

'm' prefix किस screen के लिए है?

(a) Mobile(b) Medium/Tablet(c) Mini(d) Max
✔ सही उत्तर: (b) Medium/Tablet
26

'l' prefix किस screen के लिए है?

(a) Large/Desktop(b) Light(c) List(d) Local
✔ सही उत्तर: (a) Large/Desktop
27

w3-col s12 m6 l4 का मतलब mobile पर —

(a) आधी width(b) पूरी width (12/12)(c) 1/3 width(d) कोई width नहीं
✔ सही उत्तर: (b) पूरी width (12/12)
28

Columns के बीच gap देने के लिए —

(a) w3-row(b) w3-row-padding(c) w3-col-gap(d) w3-margin
✔ सही उत्तर: (b) w3-row-padding
29

Horizontal navigation bar बनाने के लिए class —

(a) w3-nav(b) w3-bar(c) w3-menu(d) w3-list
✔ सही उत्तर: (b) w3-bar
30

Navigation item define करने वाली class —

(a) w3-bar-item(b) w3-nav-item(c) w3-link(d) w3-menu-item
✔ सही उत्तर: (a) w3-bar-item
31

Mouse hover पर dropdown खोलने के लिए —

(a) w3-dropdown-hover(b) w3-dropdown-click(c) w3-hover-menu(d) w3-submenu
✔ सही उत्तर: (a) w3-dropdown-hover
32

Menu को mobile-friendly बनाने वाली class —

(a) w3-responsive(b) w3-mobile(c) w3-small(d) w3-fit
✔ सही उत्तर: (b) w3-mobile
33

Large screens पर element छुपाने के लिए —

(a) w3-hide-small(b) w3-hide-large(c) w3-show-large(d) w3-mobile-only
✔ सही उत्तर: (b) w3-hide-large
34

Basic button बनाने वाली class —

(a) w3-btn-basic(b) w3-button(c) w3-action(d) w3-click
✔ सही उत्तर: (b) w3-button
35

Full width button बनाने वाली class —

(a) w3-block(b) w3-full(c) w3-wide(d) w3-100
✔ सही उत्तर: (a) w3-block
36

Button को non-clickable बनाने वाली class —

(a) w3-off(b) w3-disabled(c) w3-inactive(d) w3-lock
✔ सही उत्तर: (b) w3-disabled
37

Input field styling के लिए class —

(a) w3-field(b) w3-input(c) w3-textbox(d) w3-form
✔ सही उत्तर: (b) w3-input
38

Dropdown select styling के लिए class —

(a) w3-dropdown(b) w3-select(c) w3-option(d) w3-menu
✔ सही उत्तर: (b) w3-select
39

Radio button styling के लिए class —

(a) w3-radio(b) w3-check(c) w3-option-btn(d) w3-select-radio
✔ सही उत्तर: (a) w3-radio
40

Element को top से slide कराने वाली class —

(a) w3-animate-top(b) w3-slide-top(c) w3-top-in(d) w3-move-top
✔ सही उत्तर: (a) w3-animate-top
41

Fade-in effect देने वाली class —

(a) w3-animate-zoom(b) w3-animate-opacity(c) w3-fade(d) w3-hide
✔ सही उत्तर: (b) w3-animate-opacity
42

Zoom-in effect देने वाली class —

(a) w3-animate-zoom(b) w3-zoom-in(c) w3-scale(d) w3-grow
✔ सही उत्तर: (a) w3-animate-zoom
43

Default animation duration है —

(a) 0.2s(b) 0.6s(c) 1s(d) 2s
✔ सही उत्तर: (b) 0.6s
44

2 सेकंड की slow animation के लिए —

(a) w3-animate-slow(b) w3-animate-fast(c) w3-animate-long(d) w3-slow-motion
✔ सही उत्तर: (a) w3-animate-slow
45

Transition property CSS में कहाँ लगती है?

(a) HTML attribute(b) CSS property(c) JavaScript function(d) meta tag
✔ सही उत्तर: (b) CSS property
46

W3.CSS Bootstrap से अलग है क्योंकि —

(a) यह भारी है(b) इसमें JS dependency नहीं(c) यह paid है(d) यह पुराना है
✔ सही उत्तर: (b) इसमें JS dependency नहीं
47

Card जैसा shadow box बनाने वाली class —

(a) w3-card(b) w3-shadow-box(c) w3-panel-box(d) w3-frame
✔ सही उत्तर: (a) w3-card
48

Theme file से क्या बदलता है?

(a) सिर्फ एक element(b) पूरी site की color scheme(c) सिर्फ fonts(d) सिर्फ buttons
✔ सही उत्तर: (b) पूरी site की color scheme
49

W3.CSS क्या offline भी चल सकता है?

(a) नहीं(b) हाँ, file download करके(c) सिर्फ paid version में(d) सिर्फ mobile पर
✔ सही उत्तर: (b) हाँ, file download करके
50

O Level M2-R5 syllabus में W3.CSS शामिल है क्योंकि —

(a) यह JavaScript सिखाता है(b) यह responsive design आसानी से सिखाता है(c) यह database सिखाता है(d) यह hosting सिखाता है
✔ सही उत्तर: (b) यह responsive design आसानी से सिखाता है

📝 B. 15 Theory Questions (Short Answers)

  1. W3.CSS क्या है? इसकी 3 विशेषताएँ लिखिए।W3.CSS एक lightweight, pure CSS framework है जिसे W3Schools ने बनाया। विशेषताएँ — lightweight (~30KB), कोई JS dependency नहीं, पूरी तरह responsive व mobile-friendly।
  2. W3.CSS को HTML page में कैसे जोड़ते हैं?head tag के अंदर link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" जोड़कर — इससे CDN से पूरी framework load हो जाती है।
  3. w3-[color] और w3-text-[color] में अंतर बताइए।w3-[color] (जैसे w3-blue) element का background रंग बदलता है। w3-text-[color] (जैसे w3-text-blue) सिर्फ text का रंग बदलता है, background नहीं।
  4. w3-container class का क्या काम है?w3-container elements को automatic padding, margin व alignment देती है, जिससे webpage का layout साफ़-सुथरा व responsive दिखता है।
  5. w3-panel किस लिए उपयोग होता है? Example दीजिए।w3-panel notifications, messages, quotes या information blocks दिखाने के लिए उपयोग होता है। जैसे: success message के लिए w3-panel w3-pale-green w3-border-green।
  6. W3.CSS में border कैसे लगाते हैं?w3-border class से default black border लगती है; w3-border-[color] से रंग बदलता है (जैसे w3-border-red); w3-round से corners round होते हैं।
  7. W3.CSS Grid System समझाइए।W3.CSS का grid 12-column system पर आधारित है। w3-row के अंदर w3-col classes होती हैं, जिनमें s (small/mobile), m (medium/tablet), l (large/desktop) prefix से हर screen के लिए अलग column width सेट होती है।
  8. w3-col s12 m6 l4 का मतलब समझाइए।Mobile (small) पर element पूरी width (12/12 columns) लेगा; tablet (medium) पर आधी width (6/12); desktop (large) पर एक-तिहाई width (4/12) लेगा — यानी responsive layout अपने आप बदलता है।
  9. W3.CSS Navigation Bar कैसे बनती है?w3-bar class से horizontal navbar container बनता है; उसके अंदर हर link को w3-bar-item व w3-button classes दी जाती हैं। Dropdown के लिए w3-dropdown-hover उपयोग होता है।
  10. W3.CSS में responsive navigation कैसे बनाएँ?बड़ी screen के लिए w3-bar उपयोग करें, और छोटी screen के लिए एक अलग w3-bar-block बनाकर उसे w3-hide-large व w3-hide-medium classes से सिर्फ mobile पर दिखाएँ।
  11. W3.CSS Buttons की मुख्य classes लिखिए।w3-button (base class), color classes (w3-blue/w3-red आदि), w3-round (rounded), w3-block (full width), w3-disabled (non-clickable)।
  12. W3.CSS Forms में कौन-सी classes उपयोग होती हैं?w3-input (text fields), w3-select (dropdown), w3-radio (radio buttons), w3-border (border देने के लिए), w3-round (rounded corners)।
  13. Animation और Transition में अंतर बताइए।Transition किसी property (जैसे color या size) के value बदलने पर smooth change करता है, अक्सर hover के साथ। Animation keyframes पर आधारित predefined motion है जो अपने आप चलती है (जैसे w3-animate-top)।
  14. W3.CSS के कोई 5 animation classes लिखिए।w3-animate-top, w3-animate-bottom, w3-animate-left, w3-animate-right, w3-animate-opacity (fade), w3-animate-zoom।
  15. W3.CSS और Bootstrap में अंतर बताइए।W3.CSS पूरी तरह pure CSS है, JavaScript dependency नहीं, lightweight व सीखने में आसान है। Bootstrap में jQuery/JS का उपयोग होता है, यह ज़्यादा feature-rich है पर थोड़ा heavy व सीखने में जटिल है।
Revision Tip: CDN link syntax, w3-color vs w3-text-color, Grid s/m/l prefix, w3-panel/w3-border/w3-bar के मुख्य उपयोग, व animation classes (top/left/zoom/opacity) — ये facts इस chapter के आधे MCQs cover कर देते हैं।
FAQ

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

W3.CSS Framework क्या है?
W3.CSS एक lightweight, responsive व modern CSS framework है जिसे W3Schools ने बनाया है। इससे बिना Bootstrap या JavaScript के attractive, fast-loading व responsive websites बनाई जा सकती हैं।
W3.CSS का सबसे बड़ा फायदा क्या है?
W3.CSS पूरी तरह responsive है, external JavaScript की ज़रूरत नहीं होती, file size बहुत छोटा (~30KB) है, और यह fast, clean व mobile-friendly websites बनाता है।
W3.CSS को project में कैसे include करते हैं?
head tag में यह link जोड़ते हैं: link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"।
W3.CSS में Grid System कैसे काम करता है?
w3-row के अंदर w3-col classes से columns बनते हैं। s (small/mobile), m (medium/tablet), l (large/desktop) prefix से हर screen size के लिए column width अलग set होती है, जैसे w3-col s12 m6 l4।
W3.CSS Components कौन-कौन से होते हैं?
W3.CSS में Navbar, Sidebar, Cards, Panels, Tables, Buttons, Forms, Colors, Borders, Fonts, Animations और कई UI Components उपलब्ध हैं।

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

Chapter 6 में JavaScript व AngularJS — पेज को interactive बनाने की पूरी दुनिया।

Chapter 6 पढ़ें ➜
↑