Chapter 1: Introduction to Web Design Chapter 2: Editors Chapter 3: HTML Basics Chapter 4: CSS Chapter 5: CSS Framework Chapter 6: JavaScript & AngularJS Chapter 7: Photo Editor Chapter 8: Web Publishing & Browsing

👉 Swipe to see more

1️⃣ Introduction to W3.CSS Framework

Introduction to W3.CSS Framework

W3.CSS एक आधुनिक और हल्का (Lightweight) CSS Framework है, जिसे W3Schools द्वारा विकसित किया गया है। इसका उद्देश्य वेब डिज़ाइन को तेज़, responsive (mobile-friendly), और आसान बनाना है। यह framework पूरी तरह से **Pure CSS** पर आधारित है, यानी इसके लिए किसी भी JavaScript library (जैसे jQuery या Bootstrap JS) की आवश्यकता नहीं होती।

आज के समय में responsive design किसी भी website की ज़रूरत है। W3.CSS आपको वही सुविधा बहुत कम कोड और साफ-सुथरे design structure में प्रदान करता है। यह framework automatically हर screen size (Mobile, Tablet, Laptop, Desktop) के लिए content को adjust कर देता है।

✨ विशेषताएँ (Key Features of W3.CSS)

Lightweight: इसका file size बहुत छोटा है (≈30KB), जिससे website जल्दी load होती है।
Responsive Design: यह mobile-first approach पर आधारित है, यानी हर screen के अनुसार layout adjust हो जाता है।
No External JS: इसमें किसी JavaScript library की dependency नहीं है।
Modern Look: इसमें cards, panels, colors, grids जैसे modern web design elements पहले से ही शामिल हैं।
Cross-Browser Compatible: यह सभी प्रमुख browsers (Chrome, Edge, Firefox, Safari) में सुचारू रूप से चलता है।
Free to Use: यह पूरी तरह से open source और free है — कोई licensing की आवश्यकता नहीं।

📘 W3.CSS को HTML Page में कैसे जोड़े?

W3.CSS framework का उपयोग करने के लिए, आपको केवल एक link tag जोड़ना होता है जो इसकी stylesheet को W3Schools के CDN से लोड करता है।


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First W3.CSS Page</title>
  <!-- W3.CSS CDN Link -->
  <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 class="w3-margin-0">Welcome to W3.CSS Framework</h1>
  </header>

  <section class="w3-content" style="max-width:960px">
    <div class="w3-panel w3-pale-blue w3-leftbar w3-border-blue w3-round w3-margin-top">
      <p>
        W3.CSS framework helps in creating responsive, fast, and clean websites without writing complex CSS.
      </p>
    </div>

    <div class="w3-row-padding w3-margin-top">
      <div class="w3-col s12 m6">
        <div class="w3-card w3-padding w3-center w3-white">
          <h3>Fast Design</h3>
          <p>Use pre-defined classes for quick UI.</p>
        </div>
      </div>
      <div class="w3-col s12 m6">
        <div class="w3-card w3-padding w3-center w3-white">
          <h3>Responsive</h3>
          <p>Automatically adjusts on any device.</p>
        </div>
      </div>
    </div>
  </section>

  <footer class="w3-container w3-blue w3-center w3-padding-16 w3-margin-top">
    <p>Developed using W3.CSS Framework</p>
  </footer>

</body>
</html>

▶️ Try Live

🧠 Code Explanation:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> — यह W3.CSS framework को आपके HTML में जोड़ता है।
w3-container — padding और proper spacing देने के लिए उपयोग होता है।
w3-blue — background को नीला रंग देता है।
w3-card — shadow effect के साथ card-like box बनाता है।
w3-row-padding और w3-col — responsive grid layout बनाने के लिए।

🎯 Advantages of Using W3.CSS

कम कोड के साथ तेज़ वेब डेवलपमेंट।
Responsive layout बनाना बहुत आसान।
हर ब्राउज़र और डिवाइस में consistent design।
कोई dependency नहीं — सिर्फ एक CSS file।
Beginners के लिए सीखना आसान और practical।

💡 Pro Tip: अगर आप NIELIT “O Level” की तैयारी कर रहे हैं, तो W3.CSS framework का अभ्यास जरूर करें — यह आपको “Web Designing and Publishing” module में responsive web layout समझने में बहुत मदद करेगा।

2️⃣ W3.CSS Colors (रंगों का प्रयोग)

W3.CSS Colors (रंगों का परिचय)

W3.CSS framework में रंगों का उपयोग बहुत सरल और आकर्षक तरीके से किया जाता है। यह predefined color classes प्रदान करता है जैसे w3-red, w3-blue, w3-green आदि, जिनका प्रयोग किसी भी HTML element पर करके आप तुरंत उसका background या text color बदल सकते हैं।

Beginners के लिए यह बहुत उपयोगी है क्योंकि उन्हें HEX या RGB values याद रखने की आवश्यकता नहीं होती — केवल class का नाम जोड़ना होता है।

🎨 Color Class Structure

सभी W3.CSS colors की class का syntax इस प्रकार होता है:

w3-[color-name]

उदाहरण के लिए:

w3-red → लाल background
w3-blue → नीला background
w3-green → हरा background
w3-yellow → पीला background
w3-black → काला background
w3-white → सफेद background
w3-gray → धूसर background

📗 Text और Background दोनों के लिए प्रयोग

w3-text-[color] → केवल text का रंग बदलता है
w3-[color] → पूरे element का background बदलता है

🧩 Example: Basic Color Usage


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Color Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

  <h2 class="w3-center">W3.CSS Color Classes</h2>

  <div class="w3-container w3-red w3-padding">
    <p>This is a Red Background Section</p>
  </div>

  <div class="w3-container w3-blue w3-padding">
    <p>This is a Blue Background Section</p>
  </div>

  <div class="w3-container w3-green w3-padding">
    <p>This is a Green Background Section</p>
  </div>

  <div class="w3-container w3-yellow w3-padding w3-text-black">
    <p>This is Yellow with Black Text</p>
  </div>

</body>
</html>

▶️ Try Live

💡 Shades (रंगों के अलग-अलग शेड्स)

W3.CSS में हर color के कई shades उपलब्ध हैं — जैसे w3-red के साथ आप w3-pale-red, w3-dark-red, w3-light-red भी प्रयोग कर सकते हैं।


<div class="w3-container w3-pale-red w3-padding">Pale Red</div>
<div class="w3-container w3-light-blue w3-padding">Light Blue</div>
<div class="w3-container w3-dark-green w3-padding">Dark Green</div>
<div class="w3-container w3-pale-yellow w3-padding">Pale Yellow</div>

▶️ Try Live

📘 Using Color in Text

आप text elements (जैसे headings, paragraphs) के लिए w3-text-[color] class का उपयोग कर सकते हैं।


<h3 class="w3-text-red">This is Red Text</h3>
<h3 class="w3-text-blue">This is Blue Text</h3>
<h3 class="w3-text-green">This is Green Text</h3>
<h3 class="w3-text-purple">This is Purple Text</h3>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में W3.CSS के color classes का syntax पूछ सकते हैं — जैसे w3-text-red का उपयोग।
Practice करें कि कैसे background और text color दोनों को एक साथ change किया जा सकता है।
Responsive UI के लिए bright colors का कम और soft shades का अधिक उपयोग करें।

💡 Remember: W3.CSS में predefined colors और shades का उपयोग करके आप professional और attractive layouts बना सकते हैं — बिना किसी custom CSS लिखे!

3️⃣ W3.CSS Containers (कंटेनर्स का प्रयोग)

W3.CSS Containers (कंटेनर क्या हैं?)

किसी भी web page में layout को व्यवस्थित (organize) करने के लिए Container का उपयोग किया जाता है। W3.CSS framework में w3-container class का प्रयोग HTML elements के बीच proper spacing, padding और alignment देने के लिए किया जाता है। यह webpage की design को neat और responsive बनाता है।

📘 Definition:

“A container in W3.CSS is a block element that provides automatic padding and alignment to its content, helping to organize elements neatly within the webpage layout.”

✨ विशेषताएँ (Features of W3.CSS Containers)

Automatic padding और margin प्रदान करता है।
Content को visually balanced रखता है।
Responsive design के लिए important role निभाता है।
Nested containers बनाकर complex layouts आसानी से बनाए जा सकते हैं।

🔹 Basic Syntax

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

🧩 Example: Simple Container Layout


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Containers Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">

  <div class="w3-container w3-blue w3-padding-16">
    <h2>Welcome to W3.CSS Containers</h2>
    <p>This is a simple container example.</p>
  </div>

  <div class="w3-container w3-white w3-padding-24 w3-margin-top">
    <h3>Advantages:</h3>
    <ul>
      <li>Adds default spacing</li>
      <li>Centers content</li>
      <li>Responsive on all devices</li>
    </ul>
  </div>

</body>
</html>

▶️ Try Live

🧱 Nested Containers (कंटेनर के अंदर कंटेनर)

W3.CSS में आप containers के अंदर और भी containers बना सकते हैं — इससे page का layout साफ़ और अलग-अलग sections में विभाजित रहता है।


<div class="w3-container w3-pale-green w3-padding">
  <h3>Main Container</h3>
  <div class="w3-container w3-white w3-border w3-round">
    <p>This is a nested container inside the main container.</p>
  </div>
</div>

▶️ Try Live

📐 Container Alignment

W3.CSS में आप content को center, left या right align कर सकते हैं। इसके लिए predefined classes का प्रयोग किया जाता है:

w3-center → Content center में आता है।
w3-left → Content left aligned रहता है।
w3-right → Content right aligned होता है।


<div class="w3-container w3-light-blue w3-center w3-padding">
  <p>This text is Center Aligned</p>
</div>

<div class="w3-container w3-pale-yellow w3-left w3-padding">
  <p>This text is Left Aligned</p>
</div>

<div class="w3-container w3-pale-red w3-right w3-padding">
  <p>This text is Right Aligned</p>
</div>

▶️ Try Live

🧠 Tips for Students (O Level Exam Focus)

w3-container class हमेशा responsive layout में उपयोग की जाती है।
Exam में पूछ सकते हैं कि “Container class का क्या उपयोग है?” — याद रखें: यह elements को padding, margin और alignment देती है।
Nested containers से design modular और readable बनती है।
हर section या header/footer के लिए container का प्रयोग करें।

💡 Remember: W3.CSS containers webpage के structure को साफ़-सुथरा और responsive बनाने में मदद करते हैं। यह हर HTML layout का foundation part होते हैं।

4️⃣ W3.CSS Panels (पैनल्स का प्रयोग)

W3.CSS Panels (पैनल्स क्या होते हैं?)

W3.CSS Panels का प्रयोग webpage पर content को neatly display करने के लिए किया जाता है। Panel एक ऐसा visual container होता है जो किसी section को highlight या अलग दिखाने में मदद करता है। इनका उपयोग अक्सर **notifications, messages, quotes, या information blocks** दिखाने के लिए किया जाता है।

W3.CSS में panels बनाने के लिए w3-panel class का प्रयोग किया जाता है। साथ ही आप इसमें w3-border, w3-round, w3-pale-* जैसे modifiers जोड़कर इसे और आकर्षक बना सकते हैं।

✨ विशेषताएँ (Key Features of Panels)

Content को visually अलग section में दिखाने के लिए उपयोगी।
Border, padding, और background automatically handle करता है।
Messages या information cards के लिए perfect।
Predefined color classes से आसानी से design बदला जा सकता है।

📘 Basic Syntax

<div class="w3-panel">
  Your content here
</div>

🧩 Example: Simple W3.CSS Panel


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Panel Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">

  <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-large">
    <p>This is a green panel with rounded corners.</p>
  </div>

</body>
</html>

▶️ Try Live

🎨 Different Panel Styles

Panels को अलग-अलग look देने के लिए आप w3-pale-color, w3-leftbar, w3-border-color जैसी classes का उपयोग कर सकते हैं।


<div class="w3-panel w3-pale-red w3-leftbar w3-border-red">
  <p>Important Message: Please save your work!</p>
</div>

<div class="w3-panel w3-pale-blue w3-border w3-round-large w3-border-blue">
  <p>Information: W3.CSS is easy to use.</p>
</div>

<div class="w3-panel w3-pale-yellow w3-border w3-border-orange w3-leftbar">
  <p>Note: Remember to link the W3.CSS stylesheet.</p>
</div>

▶️ Try Live

📦 Combining Panels with Icons and Text

आप panels में icons या heading जोड़कर उन्हें और professional बना सकते हैं।


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

<div class="w3-panel w3-border w3-pale-red w3-round">
  <h4>❌ Error!</h4>
  <p>Something went wrong while processing your request.</p>
</div>

▶️ Try Live

💡 Use Case Examples

Form submission success/error messages दिखाने के लिए।
Important notifications के लिए।
Tips या reminders देने के लिए।
Quote या Highlight box के रूप में।

🧠 Tips for Students (O Level Focus)

w3-panel class हमेशा information blocks में उपयोग की जाती है।
Exam में syntax या class का उपयोग पूछ सकते हैं — जैसे w3-panel w3-border w3-pale-green का क्या प्रभाव होगा?
Practice करें कि border, roundness और color कैसे बदलते हैं।

💡 Remember: Panels webpage के design को साफ़ और organized बनाते हैं — यह हर responsive layout में readable content दिखाने का आसान तरीका है।

5️⃣ W3.CSS Borders (बॉर्डर प्रॉपर्टीज और स्टाइल्स)

W3.CSS Borders (बॉर्डर प्रॉपर्टीज और स्टाइल्स)

किसी भी webpage के elements को visually अलग दिखाने के लिए borders का उपयोग किया जाता है। W3.CSS framework आपको predefined border classes प्रदान करता है जिससे आप बहुत आसानी से किसी भी element (जैसे container, panel, paragraph या image) के चारों ओर border जोड़ सकते हैं।

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

📘 Basic Syntax

<div class="w3-border">Content</div>
<div class="w3-border w3-border-red">Red Border</div>
<div class="w3-border w3-round-large">Rounded Border</div>

✨ मुख्य Classes (Important Border Classes)

w3-border → Default black thin border जोड़ता है।
w3-border-[color] → Border का रंग बदलता है।
w3-round → Rounded corner बनाता है।
w3-round-large → ज़्यादा rounded corner।
w3-round-xlarge → और भी ज़्यादा smooth rounded border।
w3-leftbar, w3-rightbar, w3-topbar, w3-bottombar → Border केवल एक साइड में लगाते हैं।

🧩 Example: Simple Border Styles


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Border Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">

  <div class="w3-container w3-border w3-margin w3-padding">
    <p>Default black thin border</p>
  </div>

  <div class="w3-container w3-border w3-border-red w3-margin w3-padding">
    <p>Red border with w3-border-red</p>
  </div>

  <div class="w3-container w3-border w3-border-blue w3-round-large w3-margin w3-padding">
    <p>Blue border with rounded corners</p>
  </div>

</body>
</html>

▶️ Try Live

🎨 One-Sided Borders

कई बार हमें border केवल एक साइड में लगाना होता है, जैसे heading या quotes के लिए — W3.CSS इसके लिए भी ready-made classes देता है।

w3-leftbar → केवल बाएँ साइड में border।
w3-rightbar → केवल दाएँ साइड में border।
w3-topbar → ऊपर की साइड में border।
w3-bottombar → नीचे की साइड में border।


<div class="w3-panel w3-leftbar w3-border-blue">
  <p>Left bar with blue color</p>
</div>

<div class="w3-panel w3-rightbar w3-border-green">
  <p>Right bar with green color</p>
</div>

<div class="w3-panel w3-bottombar w3-border-red">
  <p>Bottom bar with red color</p>
</div>

▶️ Try Live

🧩 Example: Border with Panels

Panels और Borders का combination webpage को professional look देता है। नीचे एक example दिया गया है जिसमें panel को border और color दोनों दिए गए हैं।


<div class="w3-panel w3-border w3-border-green w3-pale-green w3-round">
  <h3>✅ Success Message</h3>
  <p>Data has been submitted successfully.</p>
</div>

<div class="w3-panel w3-border w3-border-red w3-pale-red w3-round">
  <h3>❌ Error Message</h3>
  <p>Something went wrong while processing.</p>
</div>

▶️ Try Live

📘 Border Width & Roundness (Extra Control)

आप border width और corner roundness को custom भी कर सकते हैं। W3.CSS में इसके लिए कई predefined rounding classes होती हैं:

w3-round-small → हल्का curve
w3-round → normal curve
w3-round-large → ज़्यादा round
w3-round-xlarge → बहुत ज़्यादा smooth
w3-round-xxlarge → full rounded (circular look)


<div class="w3-container w3-border w3-round-small w3-padding">Small Round</div>
<div class="w3-container w3-border w3-round-large w3-padding">Large Round</div>
<div class="w3-container w3-border w3-round-xlarge w3-padding">X-Large Round</div>
<div class="w3-container w3-border w3-round-xxlarge w3-padding">XX-Large Round</div>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

w3-border का उपयोग किसी भी element के चारों ओर border लगाने के लिए करें।
Exam में w3-leftbar या w3-bottombar जैसे one-sided border का उपयोग समझना आवश्यक है।
Practice करें कि border color और roundness कैसे layout को प्रभावित करते हैं।
Panels और Borders का combination बहुत बार practical में आता है।

💡 Remember: Borders webpage के content को स्पष्ट रूप से अलग-अलग section में बाँटने में मदद करते हैं। W3.CSS आपको बिना किसी CSS code लिखे beautiful border design तैयार करने की सुविधा देता है।

6️⃣ W3.CSS Fonts (फॉन्ट्स और टेक्स्ट स्टाइलिंग)

W3.CSS Fonts (फॉन्ट्स और टेक्स्ट स्टाइलिंग)

किसी भी webpage की readability और look को बेहतर बनाने में Fonts का बहुत बड़ा योगदान होता है। W3.CSS framework में font styling को control करने के लिए predefined classes दी गई हैं, जिससे बिना custom CSS लिखे attractive typography तैयार की जा सकती है।

यह framework default रूप से "Segoe UI", "Arial", sans-serif family उपयोग करता है, लेकिन आप चाहें तो Google Fonts या custom fonts को भी आसानी से जोड़ सकते हैं।

📘 Basic Syntax

<div class="w3-container w3-serif">Serif Font</div>
<div class="w3-container w3-sans-serif">Sans-serif Font</div>
<div class="w3-container w3-monospace">Monospace Font</div>

✨ Font Related Classes (मुख्य Font Classes)

w3-serif → Traditional serif font देता है (जैसे Times New Roman)।
w3-sans-serif → Clean और modern sans-serif font देता है (जैसे Arial, Segoe UI)।
w3-monospace → Code-like monospace font देता है (जैसे Courier New)।
w3-wide → Text को थोड़ा फैला (wide) दिखाता है।
w3-small / w3-large / w3-xlarge → Font size को छोटा या बड़ा करने के लिए।
w3-text-[color] → Text का रंग बदलने के लिए।

🧩 Example: Different Font Families


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>W3.CSS Font Example</title>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">

  <h3 class="w3-serif">This is Serif Font (Times New Roman)</h3>
  <h3 class="w3-sans-serif">This is Sans-serif Font (Segoe UI)</h3>
  <h3 class="w3-monospace">This is Monospace Font (Courier New)</h3>

</body>
</html>

▶️ Try Live

🎨 Font Size & Width Classes

W3.CSS में font size बदलने के लिए predefined size classes उपलब्ध हैं। इनका उपयोग headings या highlighted text के लिए किया जा सकता है।

w3-small → छोटा font
w3-large → बड़ा font
w3-xlarge → और बड़ा font
w3-xxlarge → बहुत बड़ा font
w3-wide → text को थोड़ा फैला हुआ दिखाता है


<h4 class="w3-small">This is Small Text</h4>
<h4 class="w3-large">This is Large Text</h4>
<h4 class="w3-xlarge">This is X-Large Text</h4>
<h4 class="w3-wide">This is Wide Text</h4>

▶️ Try Live

🎨 Font Colors

आप text का रंग बदलने के लिए w3-text-[color] class का उपयोग कर सकते हैं। उदाहरण के लिए — w3-text-red, w3-text-blue, w3-text-green आदि।


<h4 class="w3-text-red">Red Text</h4>
<h4 class="w3-text-green">Green Text</h4>
<h4 class="w3-text-blue">Blue Text</h4>
<h4 class="w3-text-purple w3-large w3-wide">Purple Wide Text</h4>

▶️ Try Live

📗 Using Custom Google Fonts

आप Google Fonts को W3.CSS page में आसानी से जोड़ सकते हैं। इसके लिए <link> tag में font import करें और फिर उसे class या inline style में उपयोग करें।


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <style>
    .custom-font { font-family: 'Roboto', sans-serif; }
  </style>
</head>
<body>

  <h3 class="custom-font w3-text-blue">This text uses Google Font: Roboto</h3>

</body>
</html>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में अक्सर पूछा जाता है — “W3.CSS में font change करने के लिए कौन-सी classes प्रयोग होती हैं?”
Practice करें कि font family, size और color एक साथ कैसे प्रयोग होते हैं।
w3-wide और w3-xlarge headings को आकर्षक बनाते हैं।
Google Fonts का प्रयोग advanced design में करें।

💡 Remember: Fonts webpage की readability और user experience को सुधारने में बहुत जरूरी होते हैं। W3.CSS की predefined font classes आपके design को clean, responsive और professional बनाती हैं।

7️⃣ W3.CSS Text (टेक्स्ट फॉर्मेटिंग और अलाइनमेंट)

W3.CSS Text (टेक्स्ट फॉर्मेटिंग और अलाइनमेंट)

Text किसी भी webpage का सबसे महत्वपूर्ण हिस्सा होता है। उसे readable, attractive और well-aligned दिखाने के लिए W3.CSS framework में कई predefined text formatting classes दी गई हैं। इनका उपयोग करके आप alignment, color, spacing, decoration, और transformation (uppercase/lowercase) को आसानी से control कर सकते हैं।

📘 Basic Syntax

<p class="w3-center w3-text-blue">This is centered blue text</p>
<h3 class="w3-right w3-text-red">Right aligned red heading</h3>

✨ Text Alignment Classes

Text को align करने के लिए W3.CSS में निम्न predefined classes दी गई हैं:

w3-left → Text को बाईं तरफ align करता है।
w3-center → Text को बीच में लाता है।
w3-right → Text को दाईं तरफ align करता है।
w3-justify → Text को justify (equal spacing) करता है।


<p class="w3-left">Left Aligned Text</p>
<p class="w3-center">Center Aligned Text</p>
<p class="w3-right">Right Aligned Text</p>
<p class="w3-justify">This text is justified. It spreads evenly across the full width of the container, creating clean left and right edges.</p>

▶️ Try Live

🎨 Text Colors

Text का रंग बदलने के लिए w3-text-[color] class का उपयोग किया जाता है। यह predefined colors जैसे red, green, blue, yellow, teal, grey आदि सपोर्ट करता है।


<h4 class="w3-text-red">Red Text</h4>
<h4 class="w3-text-green">Green Text</h4>
<h4 class="w3-text-blue">Blue Text</h4>
<h4 class="w3-text-teal">Teal Text</h4>
<h4 class="w3-text-grey">Grey Text</h4>

▶️ Try Live

🔠 Text Transformations

Text को uppercase, lowercase या capitalize करने के लिए W3.CSS कुछ special classes प्रदान करता है।

w3-uppercase → सभी letters को capital में बदल देता है।
w3-lowercase → सभी letters को छोटे अक्षरों में बदल देता है।
w3-capitalize → हर शब्द के पहले अक्षर को capital करता है।


<p class="w3-uppercase">this text will be uppercase</p>
<p class="w3-lowercase">THIS TEXT WILL BE LOWERCASE</p>
<p class="w3-capitalize">this text will be capitalized</p>

▶️ Try Live

🖋️ Text Decoration

Underline, overline और strike-through जैसे text decorations लगाने के लिए W3.CSS में नीचे दिए गए classes का उपयोग किया जाता है।

w3-underline → Text को underline करता है।
w3-overline → Text के ऊपर line जोड़ता है।
w3-line-through → Text पर strike-through (कटे हुए) effect देता है।


<p class="w3-underline">Underlined Text</p>
<p class="w3-overline">Overlined Text</p>
<p class="w3-line-through">Strikethrough Text</p>

▶️ Try Live

🧩 Text Shadow Effect

Attractive headings के लिए आप w3-text-shadow या w3-text-shadow-white जैसी classes का प्रयोग कर सकते हैं। यह text को 3D look देता है।


<h2 class="w3-text-shadow w3-text-blue">Blue Shadow Text</h2>
<h2 class="w3-text-shadow-white w3-text-black">White Shadow on Black</h2>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में alignment और transformation classes पर प्रश्न पूछे जाते हैं।
w3-center और w3-justify का difference समझें।
Practice करें कि text color और decoration classes को combine करके professional design कैसे बनता है।
Text shadow का उपयोग केवल headings में करें।

💡 Remember: Text formatting webpage की readability और presentation दोनों को बेहतर बनाता है। W3.CSS की predefined classes से आप बिना custom CSS लिखे professional typography बना सकते हैं।

8️⃣ W3.CSS Colors (कलर थीम्स और उपयोग)

W3.CSS Colors (कलर थीम्स और उपयोग)

Web designing में रंग (Colors) सबसे महत्वपूर्ण भूमिका निभाते हैं। यह न केवल webpage की look को आकर्षक बनाते हैं, बल्कि readability और user experience को भी बेहतर करते हैं। W3.CSS framework में रंगों के लिए predefined color classes दी गई हैं, जिससे आप बिना किसी custom CSS लिखे beautiful designs बना सकते हैं।

W3.CSS में हर color का एक base class (जैसे w3-red) और उसके साथ light और dark variations भी होते हैं, जैसे w3-pale-red, w3-dark-grey आदि।

📘 Basic Syntax

<div class="w3-container w3-red">Red Background</div>
<div class="w3-container w3-text-blue">Blue Text</div>
<div class="w3-container w3-pale-green">Light Green Background</div>

✨ Color Classes in W3.CSS

W3.CSS framework में दो तरह की color classes होती हैं:

Background Colors: w3-red, w3-blue, w3-green, w3-yellow आदि।
Text Colors: w3-text-red, w3-text-blue, w3-text-white आदि।

🎨 Common Color Classes

w3-red → लाल रंग
w3-blue → नीला रंग
w3-green → हरा रंग
w3-yellow → पीला रंग
w3-teal → हरा-नीला मिश्रण
w3-purple → जामुनी रंग
w3-orange → नारंगी रंग
w3-black → काला रंग
w3-white → सफेद रंग
w3-grey → धूसर रंग (grey shades)

🧩 Example: Background Colors


<div class="w3-container w3-red">Red Background</div>
<div class="w3-container w3-green">Green Background</div>
<div class="w3-container w3-blue">Blue Background</div>
<div class="w3-container w3-yellow">Yellow Background</div>
<div class="w3-container w3-purple w3-text-white">Purple Background</div>

▶️ Try Live

🖋️ Example: Text Colors


<p class="w3-text-red">Red Text</p>
<p class="w3-text-green">Green Text</p>
<p class="w3-text-blue">Blue Text</p>
<p class="w3-text-teal">Teal Text</p>
<p class="w3-text-purple">Purple Text</p>
<p class="w3-text-grey">Grey Text</p>

▶️ Try Live

🌈 Pale (Light) Color Shades

W3.CSS में “pale” classes light background shades के लिए उपयोग होती हैं। ये headings, alert messages या card backgrounds के लिए perfect होती हैं।


<div class="w3-container w3-pale-red w3-border w3-border-red">Pale Red Background</div>
<div class="w3-container w3-pale-green w3-border w3-border-green">Pale Green Background</div>
<div class="w3-container w3-pale-blue w3-border w3-border-blue">Pale Blue Background</div>
<div class="w3-container w3-pale-yellow w3-border w3-border-yellow">Pale Yellow Background</div>

▶️ Try Live

🧩 Example: Using W3.CSS Color Themes

W3.CSS में कुछ predefined color themes भी होती हैं, जैसे w3-theme, w3-theme-l1 (light), और w3-theme-d1 (dark) जिन्हें आप पूरे layout में apply कर सकते हैं।


<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">

<div class="w3-container w3-theme">
  <h3>Theme Example</h3>
  <p>This section uses w3-theme-blue color scheme.</p>
</div>

<div class="w3-container w3-theme-l1">Light Shade</div>
<div class="w3-container w3-theme-d1">Dark Shade</div>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में पूछा जा सकता है — “W3.CSS में text का रंग कैसे बदला जाता है?”
w3-pale-[color] और w3-text-[color] का अंतर समझें।
Theme files (जैसे w3-theme-blue.css) से पूरे page की color scheme बदली जा सकती है।
Contrast का ध्यान रखें — light background पर dark text और dark background पर light text रखें।

💡 Remember: Colors केवल decoration नहीं बल्कि user readability और brand identity का हिस्सा हैं। W3.CSS में color classes का सही उपयोग webpage को professional और responsive बनाता है।

9️⃣ W3.CSS Containers and Layouts (कंटेनर और लेआउट डिज़ाइन)

W3.CSS Containers and Layouts (कंटेनर और लेआउट डिज़ाइन)

किसी भी webpage की structure को व्यवस्थित करने के लिए Containers और Layouts का उपयोग किया जाता है। W3.CSS framework इन दोनों के लिए powerful predefined classes प्रदान करता है, जिससे आप responsive और attractive webpages बहुत आसानी से बना सकते हैं।

एक Container webpage का section होता है जिसमें content (text, images, buttons आदि) को रखा जाता है। Layout classes containers को screen size के अनुसार automatically adjust करती हैं — जिससे आपका design हर device (desktop, tablet, mobile) पर responsive दिखे।

📘 Basic Syntax

<div class="w3-container">
  <h2>My First Container</h2>
  <p>This is a simple W3.CSS container.</p>
</div>

✨ Container Classes (मुख्य Container Classes)

w3-container → Padding और margin के साथ content को wrap करता है।
w3-content → Fixed width (max-width: 980px) वाला responsive container।
w3-panel → Shadow और padding वाला bordered block।
w3-card → Panel जैसा look लेकिन shadow effect के साथ।
w3-padding / w3-padding-large → अंदर spacing बढ़ाने के लिए।


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-light-grey">

  <div class="w3-container w3-blue w3-padding">
    <h2>w3-container Example</h2>
    <p>This section uses W3.CSS container class.</p>
  </div>

  <div class="w3-content w3-border w3-padding">
    <h3>w3-content Example</h3>
    <p>This is a centered container with a fixed width.</p>
  </div>

</body>
</html>

▶️ Try Live

🎨 Panels and Cards

W3.CSS में w3-panel और w3-card का उपयोग clean design sections बनाने के लिए किया जाता है। w3-card में हल्का shadow होता है जो element को elevated effect देता है।


<div class="w3-panel w3-pale-green w3-border w3-border-green">
  <h3>Panel Example</h3>
  <p>This is a simple w3-panel.</p>
</div>

<div class="w3-card w3-padding w3-margin w3-pale-blue">
  <h3>Card Example</h3>
  <p>This is a card with shadow effect.</p>
</div>

▶️ Try Live

📐 Layout Design (Grid System)

Responsive layout बनाने के लिए W3.CSS में Grid System दिया गया है। इसमें row और column structure का उपयोग किया जाता है।

🔹 Basic Structure:

<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>

यहां:

s12 → Small devices (mobile) के लिए 12 columns (full width)
m6 → Medium devices (tablet) के लिए 6 columns
l4 → Large devices (desktop) के लिए 4 columns


<div class="w3-row-padding w3-margin">
  <div class="w3-col s12 m6 l4 w3-green w3-padding">
    <p>Column 1</p>
  </div>
  <div class="w3-col s12 m6 l8 w3-teal w3-padding">
    <p>Column 2</p>
  </div>
</div>

▶️ Try Live

🧩 Example: Responsive Three Column 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>

▶️ Try Live

🎨 Responsive Layout Tips

Always wrap columns in w3-row or w3-row-padding।
Columns के लिए w3-col और responsive size attributes (s, m, l) use करें।
w3-mobile class small screens के लिए elements को full width कर देती है।
Use w3-hide-small / w3-hide-large classes to control visibility.

💡 Remember: W3.CSS का grid system CSS Flexbox जैसा powerful tool है जो layouts को हर screen size पर responsive बनाता है। O Level practical में responsive layout बनाना एक frequently asked topic है।

🔟 W3.CSS Navigation Bars (नेविगेशन बार और मेन्यू डिज़ाइन)

W3.CSS Navigation Bars (नेविगेशन बार और मेन्यू डिज़ाइन)

किसी भी वेबसाइट का सबसे महत्वपूर्ण हिस्सा उसका Navigation Bar होता है। यह users को website के विभिन्न pages या sections तक पहुँचने का आसान तरीका प्रदान करता है। W3.CSS framework में predefined navigation bar classes होती हैं जिनकी मदद से आप बिना custom CSS के beautiful और responsive menu design बना सकते हैं।

📘 Definition

“A navigation bar is a user interface element that allows visitors to navigate different parts of a website easily.” सरल शब्दों में — यह website के ऊपर या बाईं ओर दिखाई देने वाला menu होता है जिसमें links होते हैं जैसे: Home | About | Services | Contact.

✨ W3.CSS Navigation Classes

w3-bar → Horizontal navigation bar बनाता है।
w3-bar-item → Navigation item या link define करता है।
w3-button → Button-style links बनाता है।
w3-mobile → Menu को mobile-friendly बनाता है।
w3-dropdown-hover / w3-dropdown-click → Dropdown menu बनाता है।

🧩 Example: Simple Horizontal Navigation Bar


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>

  <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">Services</a>
    <a href="#" class="w3-bar-item w3-button w3-mobile">Contact</a>
  </div>

</body>
</html>

▶️ Try Live

🎨 Active Menu Highlight

आप current active page को highlight करने के लिए w3-theme या w3-red जैसी color classes लगा सकते हैं।


<div class="w3-bar w3-dark-grey">
  <a href="#" class="w3-bar-item w3-button w3-green">Home</a>
  <a href="#" class="w3-bar-item w3-button">About</a>
  <a href="#" class="w3-bar-item w3-button">Blog</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

▶️ Try Live

🧭 Example: Navigation with Dropdown Menu

Dropdown menus website navigation को professional और structured बनाते हैं। W3.CSS में dropdown menus को w3-dropdown-hover या w3-dropdown-click class से बनाया जा सकता है।


<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>
      <a href="#" class="w3-bar-item w3-button">JavaScript</a>
    </div>
  </div>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

▶️ Try Live

📱 Responsive Navigation (Mobile Friendly)

जब स्क्रीन छोटी होती है (जैसे मोबाइल में), navigation bar को responsive बनाने के लिए w3-bar-block और w3-hide-small जैसी classes का उपयोग किया जाता है।


<div class="w3-bar w3-blue w3-large">
  <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Courses</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Blog</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Contact</a>
</div>

<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>
  <a href="#" class="w3-bar-item w3-button">Blog</a>
  <a href="#" class="w3-bar-item w3-button">Contact</a>
</div>

▶️ Try Live

🎨 Example: Navigation Bar with Logo

आप navigation bar में left side पर logo या brand name भी जोड़ सकते हैं। यह design को professional और brand-focused बनाता है।


<div class="w3-bar w3-dark-grey">
  <a href="#" class="w3-bar-item w3-button w3-mobile w3-green">
    <b>BoostingSkills</b>
  </a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Courses</a>
  <a href="#" class="w3-bar-item w3-button w3-mobile">Contact</a>
</div>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

w3-bar और w3-bar-item classes navigation bar के आधार हैं।
Dropdown menu बनाना और hover effects लगाना practice करें।
Responsive menu के लिए w3-mobile और w3-hide-small जरूरी हैं।
Exam में अक्सर पूछा जाता है — “Create a responsive navigation bar using W3.CSS.”

💡 Remember: Navigation bars user experience को आसान और intuitive बनाते हैं। W3.CSS की मदद से आप बिना CSS कोड लिखे सुंदर, responsive और accessible navigation menus बना सकते हैं।

1️1️⃣ W3.CSS Buttons and Forms (बटन और फॉर्म डिज़ाइन)

W3.CSS Buttons and Forms (बटन और फॉर्म डिज़ाइन)

वेबसाइट पर user interaction के लिए सबसे ज़रूरी elements होते हैं Buttons और Forms। Buttons actions (जैसे submit, login, next आदि) perform करने के लिए होते हैं, जबकि Forms user input collect करने के लिए। W3.CSS framework इन दोनों को सुंदर, responsive और professional look देने के लिए predefined classes प्रदान करता है।

✨ W3.CSS Button Classes

w3-button → Basic button class।
w3-btn → Old version but still supported।
w3-round → Rounded corner buttons के लिए।
w3-block → Full width button के लिए।
w3-disabled → Disabled button के लिए।
w3-hover-color → Hover effect देने के लिए।

🧩 Example: Basic Buttons


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-padding">

  <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>

</body>
</html>

▶️ Try Live

🎨 Button Color Variations

Buttons को अलग-अलग colors देने के लिए w3-red, w3-green, w3-teal आदि classes use की जाती हैं।


<button class="w3-button w3-red">Delete</button>
<button class="w3-button w3-green">Save</button>
<button class="w3-button w3-teal">Upload</button>
<button class="w3-button w3-yellow">Warning</button>
<button class="w3-button w3-black w3-text-white">Dark Mode</button>

▶️ Try Live

🧠 Button Tips

Use w3-hover-color जैसे hover effects interactivity के लिए।
Accessibility के लिए alt और title attributes का उपयोग करें।
O Level exam में button styling और event handling दोनों का question पूछा जाता है।

📋 Forms in W3.CSS

Forms website में user data collect करने का सबसे अच्छा तरीका हैं — जैसे Login, Registration, Feedback, या Contact forms। W3.CSS forms को simple और responsive बनाने के लिए classes देता है जैसे: w3-input, w3-label, w3-select, w3-border, आदि।

✨ Common Form Classes

w3-input → Input fields के लिए।
w3-select → Dropdown menu के लिए।
w3-label → Label styling के लिए।
w3-border → Border वाला field।
w3-round → Rounded corners।
w3-padding → Proper spacing के लिए।
w3-light-grey → Background color के लिए।

🧩 Example: Simple Contact Form


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-padding">

  <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">

      <label class="w3-text-blue"><b>Message</b></label>
      <textarea class="w3-input w3-border w3-round" placeholder="Write your message"></textarea>

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

    </form>
  </div>

</body>
</html>

▶️ Try Live

🎨 Example: Form with Dropdown and Radio Buttons


<div class="w3-container w3-card w3-pale-yellow w3-padding">
  <h3>Student Registration</h3>
  <form class="w3-container">

    <label>Course</label>
    <select class="w3-select w3-border">
      <option value="" disabled selected>Choose your course</option>
      <option>HTML</option>
      <option>CSS</option>
      <option>JavaScript</option>
    </select>

    <p>Gender:</p>
    <input class="w3-radio" type="radio" name="gender" value="Male"> Male
    <input class="w3-radio" type="radio" name="gender" value="Female"> Female

    <button class="w3-button w3-blue w3-margin-top">Register</button>

  </form>
</div>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में “Create a registration form using W3.CSS” अक्सर पूछा जाता है।
Form validation के लिए JavaScript के साथ practice करें।
Use w3-input और w3-border clean look के लिए।
Hover effects और responsive layout पर ध्यान दें।

💡 Remember: Buttons और Forms user interaction के आधार होते हैं। W3.CSS की मदद से ये responsive और consistent दिखते हैं — जो हर professional website के लिए ज़रूरी है।

1️⃣2️⃣ W3.CSS Animations and Transitions (एनिमेशन और ट्रांज़िशन इफेक्ट्स)

W3.CSS Animations and Transitions (एनिमेशन और ट्रांज़िशन इफेक्ट्स)

किसी भी modern website को interactive और आकर्षक बनाने के लिए Animations और Transitions का प्रयोग किया जाता है। ये webpages में movement और smooth visual changes लाते हैं जिससे user experience बेहतर होता है। W3.CSS framework predefined animation classes प्रदान करता है जो बिना custom CSS लिखे animated effects बनाना आसान बना देती हैं।

📘 Difference Between Animation and Transition

Transition: किसी property के value बदलने पर smooth change होता है (जैसे color या size change)।
Animation: Elements को स्वतः move या change करने के लिए keyframes पर आधारित predefined motion होती है।

✨ Common W3.CSS Animation Classes

w3-animate-top → Element top से slide होकर आता है।
w3-animate-bottom → Element नीचे से slide होता है।
w3-animate-left → Element बाईं ओर से आता है।
w3-animate-right → Element दाईं ओर से आता है।
w3-animate-opacity → Fade-in effect देता है।
w3-animate-zoom → Zoom-in effect देता है।
w3-animate-fading → लगातार fade in और fade out करता है।

🧩 Example 1: Basic Animation Effects


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body class="w3-padding">

  <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-left w3-green w3-padding">
    <h2>Slide from Left</h2>
  </div>

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

</body>
</html>

▶️ Try Live

🎨 Example 2: Fading and Opacity Animation

Fade effects elements को धीरे-धीरे visible या invisible करते हैं, जो smooth visual transitions के लिए perfect हैं।


<div class="w3-container w3-center w3-animate-opacity w3-pale-blue w3-padding">
  <h2>Fade In Animation</h2>
  <p>This text fades in smoothly using w3-animate-opacity class.</p>
</div>

<div class="w3-container w3-center w3-animate-fading w3-pale-green w3-padding">
  <h2>Continuous Fading Effect</h2>
</div>

▶️ Try Live

🧩 Example 3: Hover Transition Effect

Transitions तब activate होते हैं जब किसी element की CSS property change होती है — जैसे hover करने पर color या size में बदलाव।


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    .hover-box {
      transition: transform 0.5s, background 0.5s;
    }
    .hover-box:hover {
      transform: scale(1.1);
      background: #00bcd4;
      color: white;
    }
  </style>
</head>
<body class="w3-padding">

  <div class="w3-container w3-center w3-padding hover-box w3-light-grey">
    <h3>Hover Over Me</h3>
    <p>This box smoothly enlarges and changes color on hover.</p>
  </div>

</body>
</html>

▶️ Try Live

🎞️ Example 4: Combining Animation and Transition

आप animation और transition दोनों को मिलाकर और भी creative visual effects बना सकते हैं। नीचे दिए गए example में card hover पर zoom और fade दोनों effects हैं।


<div class="w3-card w3-center w3-padding w3-animate-zoom hover-box w3-pale-yellow">
  <h3>Animated Card</h3>
  <p>Zoom and hover effect together make this interactive!</p>
</div>

▶️ Try Live

⚙️ Custom Animation Duration

W3.CSS default animation duration 0.6s होती है, लेकिन आप custom speed भी दे सकते हैं:

w3-animate-slow → 2 सेकंड में animation।
w3-animate-fast → 0.3 सेकंड में animation।


<div class="w3-container w3-animate-slow w3-teal w3-center w3-padding">
  <h2>Slow Animation</h2>
</div>

<div class="w3-container w3-animate-fast w3-orange w3-center w3-padding">
  <h2>Fast Animation</h2>
</div>

▶️ Try Live

🧠 Tips for Students (O Level Focus)

Exam में “Create an animated banner using W3.CSS” जैसा practical पूछा जा सकता है।
Hover effects और animation timing properties को समझें।
w3-animate-opacity और w3-animate-zoom सबसे common हैं।
Animation का उपयोग user distraction के बजाय focus बढ़ाने के लिए करें।

💡 Remember: Animation आपकी website को जीवंत बनाते हैं — लेकिन balance ज़रूरी है। बहुत ज़्यादा motion user experience खराब कर सकता है। W3.CSS predefined animations beginners के लिए आसान और professional results देते हैं।

❓ FAQs on W3.CSS Framework (अक्सर पूछे जाने वाले प्रश्न)

❓ W3.CSS Framework – Frequently Asked Questions

नीचे दिए गए प्रश्न students, beginners और web developers द्वारा सबसे ज़्यादा पूछे जाने वाले हैं जब वे W3.CSS framework सीखना शुरू करते हैं या web design projects में implement करते हैं।

1️⃣ What is W3.CSS?

W3.CSS एक lightweight, modern और responsive CSS framework है जिसे W3Schools द्वारा develop किया गया है। यह website layouts, navigation bars, tables, forms और responsive grids को बिना extra CSS code लिखे आसान तरीके से design करने में मदद करता है।

2️⃣ How is W3.CSS different from Bootstrap?

W3.CSS पूरी तरह pure CSS है — इसमें JavaScript dependency नहीं है।
Bootstrap में jQuery और JavaScript का उपयोग होता है।
W3.CSS lightweight और easy-to-learn framework है।
Bootstrap ज्यादा customizable और feature-rich है लेकिन थोड़ा heavy होता है।

3️⃣ Why should I use W3.CSS for web design?

क्योंकि W3.CSS —

Free और Open-Source है।
Fully responsive websites बनाता है।
Easy syntax और ready-made classes provide करता है।
Beginners और O Level students के लिए perfect है।

4️⃣ How do I include W3.CSS in my project?

आप नीचे दिया गया link अपने HTML document के <head> में जोड़ें:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

5️⃣ Does W3.CSS support responsive web design?

हाँ ✅ W3.CSS में built-in responsive grid system है जो small (mobile), medium (tablet) और large (desktop) devices पर automatically layout adjust करता है। Classes जैसे w3-col s12 m6 l4 इस functionality को define करती हैं।

6️⃣ What are the main components of W3.CSS?

Containers, Panels और Cards
Navigation Bars और Menus
Buttons और Forms
Tables, Lists और Images
Colors, Themes और Animations

7️⃣ What is the advantage of using W3.CSS over custom CSS?

- Time saving — predefined classes से design जल्दी होता है।
- Consistency — हर element एकसमान look देता है।
- No CSS errors — beginners के लिए perfect error-free styling।
- Responsive layout built-in — extra media queries की ज़रूरत नहीं।

8️⃣ Can I customize W3.CSS?

बिल्कुल! आप अपनी CSS file में existing W3.CSS classes override कर सकते हैं या custom styles जोड़ सकते हैं। साथ ही आप w3-theme colors को modify कर सकते हैं।

9️⃣ How do I create animations using W3.CSS?

W3.CSS में कई predefined animation classes हैं — जैसे w3-animate-top, w3-animate-left, w3-animate-zoom आदि। बस element में ये class add करें, और animation automatically लागू हो जाएगा।

🔟 Does W3.CSS work offline?

हाँ, आप W3.CSS file को download करके अपने project folder में locally use कर सकते हैं। बस path को local file के अनुसार update करें।

1️⃣1️⃣ Is W3.CSS suitable for NIELIT O Level practicals?

बिल्कुल ✅ O Level (M2-R5) syllabus में W3.CSS framework शामिल है। यह students को responsive design concepts सिखाने और clean, professional web pages बनाने के लिए सबसे सरल तरीका है।

1️⃣2️⃣ Can W3.CSS be combined with JavaScript?

हाँ, आप custom JavaScript या frameworks (जैसे AngularJS या React) के साथ W3.CSS का उपयोग कर सकते हैं। यह केवल styling पर focus करता है, logic या events पर नहीं।

1️⃣3️⃣ Where can I practice W3.CSS online?

आप W3Schools TryIt Editor या अपनी वेबसाइट 👉 BoostingSkills Live Compiler पर सीधे practice कर सकते हैं।

💡 Remember: W3.CSS सीखना आसान है लेकिन master करने के लिए practice जरूरी है। हर concept को HTML examples के साथ live run करके देखें ताकि theory के साथ practical clear हो।

Web Site Development using W3.CSS Framework – NIELIT O Level (M2-R5)

Introduction to W3.CSS Framework

✨ विशेषताएँ (Key Features of W3.CSS)

📘 W3.CSS को HTML Page में कैसे जोड़े?

🧠 Code Explanation:

🎯 Advantages of Using W3.CSS

W3.CSS Colors (रंगों का परिचय)

🎨 Color Class Structure

📗 Text और Background दोनों के लिए प्रयोग

🧩 Example: Basic Color Usage

💡 Shades (रंगों के अलग-अलग शेड्स)

📘 Using Color in Text

🧠 Tips for Students (O Level Focus)

W3.CSS Containers (कंटेनर क्या हैं?)

📘 Definition:

✨ विशेषताएँ (Features of W3.CSS Containers)

🔹 Basic Syntax

🧩 Example: Simple Container Layout

🧱 Nested Containers (कंटेनर के अंदर कंटेनर)

📐 Container Alignment

🧠 Tips for Students (O Level Exam Focus)

W3.CSS Panels (पैनल्स क्या होते हैं?)

✨ विशेषताएँ (Key Features of Panels)

📘 Basic Syntax

🧩 Example: Simple W3.CSS Panel

🎨 Different Panel Styles

📦 Combining Panels with Icons and Text

💡 Use Case Examples

🧠 Tips for Students (O Level Focus)

W3.CSS Borders (बॉर्डर प्रॉपर्टीज और स्टाइल्स)

📘 Basic Syntax

✨ मुख्य Classes (Important Border Classes)

🧩 Example: Simple Border Styles

🎨 One-Sided Borders

🧩 Example: Border with Panels

📘 Border Width & Roundness (Extra Control)

🧠 Tips for Students (O Level Focus)

W3.CSS Fonts (फॉन्ट्स और टेक्स्ट स्टाइलिंग)

📘 Basic Syntax

✨ Font Related Classes (मुख्य Font Classes)

🧩 Example: Different Font Families

🎨 Font Size & Width Classes

🎨 Font Colors

📗 Using Custom Google Fonts

🧠 Tips for Students (O Level Focus)

W3.CSS Text (टेक्स्ट फॉर्मेटिंग और अलाइनमेंट)

📘 Basic Syntax

✨ Text Alignment Classes

🎨 Text Colors

🔠 Text Transformations

🖋️ Text Decoration

🧩 Text Shadow Effect

🧠 Tips for Students (O Level Focus)

W3.CSS Colors (कलर थीम्स और उपयोग)

📘 Basic Syntax

✨ Color Classes in W3.CSS

🎨 Common Color Classes

🧩 Example: Background Colors

🖋️ Example: Text Colors

🌈 Pale (Light) Color Shades

🧩 Example: Using W3.CSS Color Themes

🧠 Tips for Students (O Level Focus)

W3.CSS Containers and Layouts (कंटेनर और लेआउट डिज़ाइन)

📘 Basic Syntax

✨ Container Classes (मुख्य Container Classes)

🎨 Panels and Cards

📐 Layout Design (Grid System)

🔹 Basic Structure:

🧩 Example: Responsive Three Column Layout

🎨 Responsive Layout Tips

W3.CSS Navigation Bars (नेविगेशन बार और मेन्यू डिज़ाइन)

📘 Definition

✨ W3.CSS Navigation Classes

🧩 Example: Simple Horizontal Navigation Bar

🎨 Active Menu Highlight

🧭 Example: Navigation with Dropdown Menu

📱 Responsive Navigation (Mobile Friendly)

🎨 Example: Navigation Bar with Logo

🧠 Tips for Students (O Level Focus)

W3.CSS Buttons and Forms (बटन और फॉर्म डिज़ाइन)