CSS (Cascading Style Sheets) – NIELIT O Level (M2-R5)

इस section में हम सीखेंगे कि CSS क्या होती है, इसके प्रकार (Inline, Internal, External), विभिन्न प्रकार के Selectors, तथा CSS Properties जैसे Background, Box Model, Border, List, और Positioning को कैसे उपयोग किया जाता है। साथ ही CSS Lists, Tables, Menu Design और Image Gallery को भी examples सहित समझेंगे।

🏠 Home 📘 Paid PDF 🧩 Mock Test

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 CSS (CSS का परिचय)

💡 What is CSS?

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

🔹 Definition:

“CSS is a style sheet language used to describe the presentation of documents written in HTML or XML.” (अर्थात HTML पेज की styling के लिए CSS का उपयोग होता है।)

📘 Example:


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

▶️ Try Code Live

🔹 Why is CSS Important?

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

🔹 Syntax of CSS:


selector {
  property: value;
}

▶️ Try Code Live

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

💡 Remember: CSS website को professional look देता है और design तथा structure को अलग रखता है — जिससे development आसान और scalable बनता है।

2️⃣ Types of CSS (CSS के प्रकार)

Types of CSS — Inline, Internal & External

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

🔹 1) Inline CSS

Definition: HTML element के अंदर style="" attribute से सीधा style apply करना। Use-case: बहुत छोटे/स्पेशल बदलाव या quick testing। Drawback: Reusability कम, maintain करना कठिन।


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

▶️ Try Code Live

🔹 2) Internal (Embedded) CSS

Definition: उसी HTML फ़ाइल के <head> में <style> tag के अंदर CSS लिखना। Use-case: Single page projects या demo pages। Note: Multiple pages के लिए बार-बार code duplicate होगा।


<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: Segoe UI, sans-serif; background:#f7f9fc; }
    h1 { color:#0b3ea9; text-align:center; }
    p  { color:#475569; }
  </style>
</head>
<body>
  <h1>Internal CSS Demo</h1>
  <p>Styles are defined inside &lt;style&gt; tag.</p>
</body>
</html>

▶️ Try Code Live

🔹 3) External CSS (Recommended)

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

index.html


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="title">External CSS Demo</h1>
  <p>This page uses styles.css for design.</p>
</body>
</html>

▶️ Try Code Live

styles.css


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

✅ Exam/Practice Tip: Real projects में External CSS use करें; Inline को केवल quick fixes के लिए रखें, Internal single-page demos के लिए ठीक है।

3️⃣ CSS Selectors (All Types Explained Deeply)

CSS Selectors – Types & Deep Explanation

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

1️⃣ Universal Selector (`*`)

सभी HTML elements को select करता है। आमतौर पर reset CSS या global style सेट करने के लिए प्रयोग किया जाता है।


*{margin:0; padding:0; box-sizing:border-box;}
body{font-family:"Segoe UI",sans-serif;}

▶️ Try Code Live

2️⃣ Tag Selector (Type Selector)

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


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

▶️ Try Code Live

3️⃣ Class Selector (`.classname`)

एक ही style कई elements पर लगाने के लिए class attribute का उपयोग किया जाता है।


<h2 class="note">Important Heading</h2>
<p class="note">Reused class on paragraph</p>

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

▶️ Try Code Live

4️⃣ ID Selector (`#idname`)

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


<h1 id="header">Welcome</h1>

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

▶️ Try Code Live

5️⃣ Descendant Selector (`parent child`)

Parent element के अंदर मौजूद सभी matching child elements को target करता है।


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

▶️ Try Code Live

6️⃣ Child Selector (`parent > child`)

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


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

▶️ Try Code Live

7️⃣ Adjacent Sibling Selector (`element + element`)

किसी element के just next sibling को target करता है।


h2+p{color:#0b3ea9;font-style:italic;}

▶️ Try Code Live

8️⃣ General Sibling Selector (`element ~ element`)

किसी element के बाद आने वाले सभी same-level siblings को select करता है।


h2~p{color:#4a148c;}

▶️ Try Code Live

9️⃣ Attribute Selectors

Attributes या उनके values के आधार पर elements को target करते हैं।

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


input[type]{border:1px solid #ccc;}
input[type="email"]{border-color:#1f4ad1;}
a[href^="https"]{color:green;}
a[href$=".pdf"]{color:red;}
a[href*="boosting"]{font-weight:bold;}

▶️ Try Code Live

🔟 Group Selector (`selector1, selector2, ...`)

कई selectors पर एक साथ एक ही style लागू करता है।


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

▶️ Try Code Live

1️1️⃣ Pseudo-Class Selectors (`:hover, :first-child` etc.)

Element की special state या position पर style लगाने के लिए उपयोग होते हैं।

:hover – Mouse hover पर
:active – Click करते समय
:focus – Input focus में
:first-child, :last-child, :nth-child() – Position आधारित


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

▶️ Try Code Live

1️2️⃣ Pseudo-Element Selectors (`::before, ::after` etc.)

Elements के अंदर generated content या specific parts पर style लगाने के लिए उपयोग होते हैं।

::before – Element से पहले content जोड़ना।
::after – Element के बाद content जोड़ना।
::first-line – Paragraph की पहली line।
::selection – Selected text styling।


h1::before{content:"★ ";color:gold;}
p::first-line{font-weight:bold;}
::selection{background:#ffeb3b;color:#000;}

▶️ Try Code Live

⚙️ Remember: CSS में specificity का क्रम होता है — Universal < Tag < Class/Attribute/Pseudo-class < ID < Inline. Conflicts में हमेशा higher specificity वाला rule apply होता है।

4️⃣ CSS Properties

CSS Properties – Foundations to Practical Use

CSS properties HTML elements के look & feel को नियंत्रित करती हैं। इस गाइड में हम वे सारी properties कवर कर रहे हैं जो एक beginner को रोज़मर्रा के web pages डिजाइन करने में चाहिए—exams और practice दोनों दृष्टि से।

1) Colors & Units (रंग और इकाइयाँ)

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

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


/* Colors and 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; }

▶️ Try Code Live

2) Typography (Fonts, Text)

पढ़ने-योग्य पेज के लिए text properties बहुत महत्वपूर्ण हैं:

font-family: fallback के साथ fonts की सूची (जैसे "Segoe UI", Arial, sans-serif)
font-size, font-weight (400, 600, bold), font-style (italic)
line-height: lines के बीच spacing; 1.5–1.8 सामान्य
text-align: left/center/right/justify
text-transform: uppercase/lowercase/capitalize
letter-spacing, word-spacing, text-decoration (underline/none)
text-shadow: glow/shadow effects


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;}
.lead{font-size:1.125rem; color:#475569;}
a{color:#0b3ea9; text-decoration:none;}
a:hover{text-decoration:underline;}

▶️ Try Code Live

3) Background Properties (रंग, चित्र, repeat)

किसी element के पीछे रंग या चित्र लगाने के लिए:

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 जैसा असर)
background (shorthand): कई values एक साथ


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

▶️ Try Code Live

4) Box Model / Spacing (margin, padding, border, box-sizing)

हर element चार layers से मिलकर बनता है: content → padding → border → margin।

padding/margin: चारों ओर के लिए; शॉर्टहैंड: top right bottom left
2-value shorthand: vertical horizontal; 3-value: top horizontal bottom
box-sizing: border-box लगाने से width में padding/border include हो जाते हैं (layout आसान)


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

▶️ Try Code Live

5) Borders & Outline (सीमा रेखाएँ)

Border element बॉक्स के हिस्से के रूप में जगह लेता है; outline बाहर की ओर draw होता है और layout प्रभावित नहीं करता—focus दिखाने में काम आता है।

border: width style color, border-radius (rounded corners)
outline: width style color, outline-offset


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

▶️ Try Code Live

6) Display & Visibility

display यह तय करता है कि element layout में कैसे behave करेगा: block (पूरी line), inline (content जितना), inline-block (inline लेकिन width/height मान्य), flex, grid, none (DOM में रहता है पर layout से हट जाता है)। visibility: hidden space रखता है पर content छुपा देता है।


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

▶️ Try Code Live

7) Sizing & Overflow

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


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

▶️ Try Code Live

8) List Properties

Unordered/Ordered lists को बेहतर look देने के लिए: list-style-type (disc, circle, square, decimal, upper-roman), list-style-position (inside/outside), list-style-image (custom bullet)।


ul.features{list-style-type:square; list-style-position:inside;}
ol.steps{list-style-type:upper-roman;}

▶️ Try Code Live

9) Positioning (static, relative, absolute, fixed, sticky) & z-index

static: default flow। relative: original स्थान से offset। absolute: nearest positioned ancestor के अनुसार; flow से बाहर। fixed: viewport से चिपका (scroll पर नहीं हिलेगा)। sticky: scroll तक normal, फिर threshold पर stick। z-index: stacking order।


.wrapper{position:relative; height:200px; background:#eaf2ff;}
.box-rel{position:relative; top:10px; left:10px; background:#bbdefb; padding:8px;}
.box-abs{position:absolute; top:20px; right:10px; background:#90caf9; padding:8px;}
.header-fixed{position:fixed; top:0; left:0; right:0; background:#1f4ad1; color:#fff; padding:6px 10px; z-index:100;}
.note-sticky{position:sticky; top:8px; background:#fff8e1; padding:4px;}

▶️ Try Code Live

10) Flexbox (Modern Layout – Beginner Must-Know)

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

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)


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

▶️ Try Code Live

11) Float & Clear (Legacy – Exam Useful)

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


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

▶️ Try Code Live

12) Effects: Shadow, Opacity, Cursor, Transitions

box-shadow, text-shadow – depth/contrast
opacity (0–1) – transparency
cursor – pointer, move, not-allowed इत्यादि
transition – smooth change (hover effects etc.)


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

▶️ Try Code Live

✅ Quick Revision: Colors/Units → Typography → Background → Box Model → Borders/Outline → Display/Visibility → Sizing/Overflow → Lists → Positioning/Stacking → Flexbox → (Legacy) Float/Clear → Effects. इन properties में mastery = 80% day-to-day CSS.

5️⃣ CSS Lists, Tables, Menu Design & Image Gallery

CSS Lists, Tables, Menus & Image Gallery – Practical Design Properties

इस सेक्शन में हम सीखेंगे कि HTML lists, tables, navigation menus और image galleries को CSS से कैसे सुंदर और responsive बनाया जाता है। ये सभी topics O Level syllabus और real-world web design दोनों में बहुत महत्वपूर्ण हैं।

1️⃣ CSS Lists (सूचियाँ सजाना)

Lists दो प्रकार की होती हैं — Unordered (ul) और Ordered (ol)। CSS से हम इनके bullets, spacing, icons, और hover effects बदल सकते हैं।

list-style-type – disc, circle, square, decimal, upper-roman आदि।
list-style-position – inside या outside bullets की जगह निर्धारित करता है।
list-style-image – custom image को bullet के रूप में लगाता है।
margin / padding – spacing नियंत्रित करता है।


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

▶️ Try Code Live

💡 Tip: Custom bullets जोड़ने के लिए list-style-image: url('icon.png'); का प्रयोग करें।

2️⃣ CSS Tables (टेबल डिज़ाइन)

HTML tables को modern look देने के लिए CSS का उपयोग किया जाता है। Beginners को ये properties जानना चाहिए:

border-collapse: collapse – cell borders को merge करता है।
text-align, padding, background-color – table readability बढ़ाते हैं।
:nth-child(even) – alternate row coloring के लिए।


table{
  width:100%;
  border-collapse:collapse;
  margin:20px 0;
}
th,td{
  border:1px solid #dbeafe;
  padding:10px;
  text-align:left;
}
th{
  background:#1f4ad1;
  color:#fff;
}
tr:nth-child(even){
  background:#f7f9fc;
}

▶️ Try Code Live

📘 Remember: Table को responsive बनाने के लिए overflow-x:auto; और display:block; लगाएँ ताकि छोटे screen पर scroll हो सके।

3️⃣ CSS Menu Design (Navigation Bar)

Navigation menus किसी भी website की backbone होती हैं। Modern menus CSS Flexbox से आसानी से बनाई जाती हैं और responsive होती हैं।

Parent element पर display:flex का प्रयोग करें।
justify-content से items को बराबर spacing दें।
Hover effect और active link styling से menu interactive बनता है।


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

▶️ Try Code Live

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

4️⃣ CSS Image Gallery (चित्र गैलरी)

Image galleries से वेबसाइट attractive दिखती है। CSS Grid/Flexbox के माध्यम से responsive gallery बनाई जा सकती है। Hover zoom effects से interaction बढ़ाया जा सकता है।

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


.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);
}

▶️ Try Code Live

💡 Practical Tip: Gallery में images के लिए Unsplash या Pexels से free stock photos use करें। और mobile-friendly design के लिए max-width:100% रखना न भूलें।

✅ Quick Recap: CSS Lists → list-style control bullets CSS Tables → border-collapse + :nth-child() for zebra effect CSS Menus → Flexbox, hover effect, active link CSS Image Gallery → Grid layout + hover zoom ये चारों topics exam में frequently पूछे जाते हैं।

6️ CSS Tables – HTML + CSS Complete Practical Example

CSS Tables – HTML and CSS Example with Deep Explanation

Tables का उपयोग structured data (जैसे marks, salary report, attendance, etc.) दिखाने के लिए किया जाता है। नीचे दिया गया example आपको सिखाएगा कि कैसे HTML और CSS मिलकर एक सुंदर, readable और responsive table बना सकते हैं।

1️⃣ HTML Structure (टेबल की मूल संरचना)

HTML में table को बनाने के लिए हम <table>, <tr>, <th> और <td> का प्रयोग करते हैं।
नीचे एक उदाहरण है जो Student Marksheet दिखाता है:


<div class="table-container">
  <table>
    <caption>Student Marksheet</caption>
    <thead>
      <tr>
        <th>Roll No</th>
        <th>Name</th>
        <th>Subject</th>
        <th>Marks</th>
        <th>Grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>101</td>
        <td>Ravi Kumar</td>
        <td>Maths</td>
        <td>86</td>
        <td>A</td>
      </tr>
      <tr>
        <td>102</td>
        <td>Pooja Sharma</td>
        <td>Science</td>
        <td>91</td>
        <td>A+</td>
      </tr>
      <tr>
        <td>103</td>
        <td>Amit Verma</td>
        <td>English</td>
        <td>78</td>
        <td>B</td>
      </tr>
    </tbody>
  </table>
</div>

▶️ Try Code Live

2️⃣ CSS Styling (टेबल को स्टाइल देना)

नीचे दिया गया CSS कोड table को professional और readable look देता है। इसमें borders, zebra striping (alternate row color), hover effect और responsive design शामिल है।


.table-container {
  overflow-x: auto;
  display: block;
  margin: 20px auto;
  max-width: 800px;
  box-shadow: 0 4px 18px rgba(0,0,0,.1);
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: "Segoe UI", Arial, sans-serif;
}

caption {
  caption-side: top;
  font-size: 1.3rem;
  font-weight: bold;
  padding: 12px;
  background-color: #1f4ad1;
  color: white;
  border-radius: 8px 8px 0 0;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #dbeafe;
}

th {
  background-color: #e3f2fd;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b3ea9;
}

tr:nth-child(even) {
  background-color: #f7f9fc;
}

tr:hover {
  background-color: #dcecff;
  transition: background 0.3s ease;
}

▶️ Try Code Live

3️⃣ Full Working Example (HTML + CSS Combined)

नीचे पूरा working example दिया गया है जिसमें HTML और CSS दोनों जोड़े गए हैं। Students इसे Boosting Skills Compiler पर run करके practical कर सकते हैं।


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Table Example</title>
  <style>
    .table-container {
      overflow-x: auto;
      display: block;
      margin: 20px auto;
      max-width: 800px;
      box-shadow: 0 4px 18px rgba(0,0,0,.1);
      border-radius: 8px;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-family: "Segoe UI", Arial, sans-serif;
    }
    caption {
      caption-side: top;
      font-size: 1.3rem;
      font-weight: bold;
      padding: 12px;
      background-color: #1f4ad1;
      color: white;
      border-radius: 8px 8px 0 0;
    }
    th, td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #dbeafe;
    }
    th {
      background-color: #e3f2fd;
      font-weight: 600;
      text-transform: uppercase;
      color: #0b3ea9;
    }
    tr:nth-child(even) {
      background-color: #f7f9fc;
    }
    tr:hover {
      background-color: #dcecff;
      transition: background 0.3s ease;
    }
  </style>
</head>
<body>
  <div class="table-container">
    <table>
      <caption>Student Marksheet</caption>
      <thead>
        <tr>
          <th>Roll No</th>
          <th>Name</th>
          <th>Subject</th>
          <th>Marks</th>
          <th>Grade</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>101</td>
          <td>Ravi Kumar</td>
          <td>Maths</td>
          <td>86</td>
          <td>A</td>
        </tr>
        <tr>
          <td>102</td>
          <td>Pooja Sharma</td>
          <td>Science</td>
          <td>91</td>
          <td>A+</td>
        </tr>
        <tr>
          <td>103</td>
          <td>Amit Verma</td>
          <td>English</td>
          <td>78</td>
          <td>B</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

▶️ Try Code Live

✅ Quick Revision:

border-collapse – एकसाथ merged borders के लिए
nth-child(even) – alternate row color
overflow-x:auto – responsive scroll
caption-side: top – heading के लिए

यह format O Level और Practical दोनों exam में सबसे ज़्यादा पूछा जाता है।

7️ CSS Menu Design (Navigation Bar with Hover & Active Link)

CSS Menu Design – Navigation Bar (Responsive + Hover + Active Link)

Website का सबसे महत्वपूर्ण हिस्सा उसका Navigation Menu होता है — जिससे user site के विभिन्न pages तक आसानी से पहुँच सकता है। इस section में हम एक सुंदर और responsive Horizontal Navigation Bar बनाना सीखेंगे।

1️⃣ What is a Navigation Bar?

Navigation Bar एक menu bar होती है जिसमें links दिए जाते हैं जैसे — Home, About, Services, Contact आदि। यह <nav> tag के अंदर रखी जाती है और anchor (<a>) tags से links बनाए जाते हैं।


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

▶️ Try Code Live

2️⃣ CSS Styling for Menu

नीचे दिए गए CSS से menu horizontally align होगा, hover effects आएँगे, active page highlight होगा और responsive behavior भी मिलेगा।


nav.menu {
  display: flex;
  justify-content: center;
  background-color: #1f4ad1;
  padding: 12px 0;
  flex-wrap: wrap; /* responsive adjustment */
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

nav.menu a {
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

nav.menu a:hover {
  background-color: #0b3ea9;
  border-radius: 6px;
}

nav.menu a.active {
  background-color: #fff;
  color: #1f4ad1;
  border-radius: 6px;
}

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

▶️ Try Code Live

3️⃣ Full Working Example (HTML + CSS Combined)

नीचे पूरा example दिया गया है — इसे run करें और देखें कैसे hover और active effects काम करते हैं।


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Navigation Menu</title>
  <style>
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #f7f9fc;
    }

    nav.menu {
      display: flex;
      justify-content: center;
      background-color: #1f4ad1;
      padding: 12px 0;
      flex-wrap: wrap;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }

    nav.menu a {
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      font-size: 1rem;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    nav.menu a:hover {
      background-color: #0b3ea9;
      border-radius: 6px;
    }

    nav.menu a.active {
      background-color: #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;
      }
    }

    h1 {
      text-align: center;
      color: #0b3ea9;
      margin-top: 40px;
    }
  </style>
</head>
<body>

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

  <h1>Welcome to Boosting Skills!</h1>

</body>
</html>

▶️ Try Code Live

✅ Quick Recap:

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

यह format O Level practicals और real website menus दोनों में perfect fit होता है।

8️⃣️ CSS Image Gallery (Responsive Grid + Hover Zoom Effect)

CSS Image Gallery – Responsive Grid Layout with Hover Effects

Image Gallery किसी भी वेबसाइट को सुंदर और interactive बनाती है। इस section में हम एक Responsive Image Gallery बनाना सीखेंगे जो automatically adjust होती है और hover करने पर Zoom Effect दिखाती है।

1️⃣ Image Gallery क्या होती है?

एक Image Gallery कई images को grid layout में दिखाने का तरीका है। यह CSS की मदद से responsive बनती है ताकि हर device (desktop, tablet, mobile) पर सुंदर दिखे।

HTML: images को structure देता है।
CSS: layout, spacing, hover effect और responsiveness control करता है।


<div class="gallery">
  <img src="https://picsum.photos/300/200?random=1" alt="Nature 1">
  <img src="https://picsum.photos/300/200?random=2" alt="Nature 2">
  <img src="https://picsum.photos/300/200?random=3" alt="Nature 3">
  <img src="https://picsum.photos/300/200?random=4" alt="Nature 4">
  <img src="https://picsum.photos/300/200?random=5" alt="Nature 5">
  <img src="https://picsum.photos/300/200?random=6" alt="Nature 6">
</div>

▶️ Try Code Live

2️⃣ CSS Properties for Image Gallery

नीचे दिए गए CSS से gallery automatically adjust होती है। Hover करने पर image थोड़ा zoom होती है और shadow देती है जिससे 3D effect महसूस होता है।


.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
  background: #f7f9fc;
}

.gallery img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.gallery img:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

▶️ Try Code Live

💡 Tip: grid-template-columns property responsive gallery design में सबसे powerful है। auto-fit और minmax() का combination automatically columns को adjust करता है।

3️⃣ Full Working Example (HTML + CSS Combined)

नीचे पूरा working code दिया गया है। इसे Boosting Skills Compiler में run करके gallery का behavior देखें।


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive CSS Image Gallery</title>
  <style>
    body {
      margin: 0;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #f7f9fc;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 15px;
      padding: 20px;
      background: #f7f9fc;
    }

    .gallery img {
      width: 100%;
      height: 180px;
      object-fit: cover;
      border-radius: 10px;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      cursor: pointer;
    }

    .gallery img:hover {
      transform: scale(1.08);
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    }

    h1 {
      text-align: center;
      color: #0b3ea9;
      margin-top: 25px;
    }
  </style>
</head>
<body>

  <h1>Beautiful CSS Image Gallery</h1>

  <div class="gallery">
    <img src="https://picsum.photos/300/200?random=1" alt="Nature 1">
    <img src="https://picsum.photos/300/200?random=2" alt="Nature 2">
    <img src="https://picsum.photos/300/200?random=3" alt="Nature 3">
    <img src="https://picsum.photos/300/200?random=4" alt="Nature 4">
    <img src="https://picsum.photos/300/200?random=5" alt="Nature 5">
    <img src="https://picsum.photos/300/200?random=6" alt="Nature 6">
  </div>

</body>
</html>

▶️ Try Code Live

4️⃣ Explanation of Important Properties

display: grid; → Gallery layout बनाने के लिए।
repeat(auto-fit, minmax()) → Columns को responsive बनाने के लिए।
object-fit: cover; → Image को proportion में crop करने के लिए।
transform: scale() → Hover पर zoom effect के लिए।
box-shadow → 3D depth effect देने के लिए।

✅ Exam Note: Practical में अगर पूछा जाए “Create an Image Gallery using HTML & CSS”, तो grid layout + hover zoom effect वाला code perfect answer होता है।

9️⃣ CSS Animation, Transition & Transform (With Practical Examples)

CSS Animation, Transition & Transform – Complete Beginner to Pro Guide

CSS की मदद से हम static web pages को dynamic और engaging बना सकते हैं। Animation, Transition और Transform तीन ऐसी properties हैं जो motion effects create करती हैं। इन्हें websites में hover, button click या page load पर इस्तेमाल किया जाता है।

1️⃣ CSS Transition क्या है?

Transition किसी property में smooth change लाने के लिए use होती है — जैसे color, size, position आदि। यह तब काम करती है जब user किसी element पर hover करता है या कोई state बदलती है।


<div class="box">Hover Me!</div>

<style>
.box {
  width: 120px;
  height: 120px;
  background-color: #1f4ad1;
  color: white;
  text-align: center;
  line-height: 120px;
  border-radius: 10px;
  transition: all 0.4s ease;
}
.box:hover {
  background-color: #0b3ea9;
  transform: scale(1.2);
}
</style>

▶️ Try Code Live

💡 Tip: transition: all 0.4s ease; का मतलब है — सभी properties 0.4 सेकंड में smooth बदलें।

2️⃣ CSS Transform क्या है?

Transform किसी element को move, rotate, scale या skew करने के लिए use होता है। यह element के shape या position को बदल सकता है।

transform: translate(x, y); → element को move करने के लिए
transform: rotate(45deg); → element को घुमाने के लिए
transform: scale(1.5); → size बड़ा या छोटा करने के लिए
transform: skew(20deg); → tilt करने के लिए


<div class="transform-box">Transform Me</div>

<style>
.transform-box {
  width: 150px;
  height: 150px;
  background-color: #ff7043;
  color: #fff;
  text-align: center;
  line-height: 150px;
  border-radius: 10px;
  margin: 10px;
  transition: 0.4s;
}
.transform-box:hover {
  transform: rotate(15deg) scale(1.1);
  background-color: #ff5722;
}
</style>

▶️ Try Code Live

🧭 Note: Transform 2D और 3D दोनों forms में इस्तेमाल हो सकता है।

3️⃣ CSS Animation क्या है?

Animation property हमें किसी element में continuously चलने वाला movement या visual effect जोड़ने की सुविधा देती है। इसके लिए हम @keyframes का उपयोग करते हैं जिससे motion define होती है।


<div class="animate-box">Animated Box</div>

<style>
.animate-box {
  width: 120px;
  height: 120px;
  background-color: #4caf50;
  color: white;
  text-align: center;
  line-height: 120px;
  border-radius: 10px;
  animation: moveBox 3s infinite alternate;
}

@keyframes moveBox {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(150px);
    background-color: #81c784;
  }
  100% {
    transform: translateX(0);
    background-color: #388e3c;
  }
}
</style>

▶️ Try Code Live

🔁 Tip: Animation को infinite चलाने के लिए infinite keyword और alternate direction के लिए alternate use करें।

4️⃣ Full Working Example (HTML + CSS Combined)

नीचे complete example दिया गया है जिसमें Transition, Transform और Animation तीनों को combine किया गया है।


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Animation and Transform Example</title>
  <style>
    body {
      margin: 0;
      background: #f7f9fc;
      font-family: "Segoe UI", Arial, sans-serif;
      text-align: center;
    }
    h1 {
      color: #1f4ad1;
      margin-top: 20px;
    }
    .container {
      display: flex;
      justify-content: center;
      gap: 40px;
      flex-wrap: wrap;
      margin-top: 30px;
    }
    .box, .transform-box, .animate-box {
      width: 120px;
      height: 120px;
      color: white;
      line-height: 120px;
      text-align: center;
      border-radius: 10px;
      font-weight: bold;
    }
    .box {
      background-color: #1f4ad1;
      transition: all 0.4s ease;
    }
    .box:hover {
      background-color: #0b3ea9;
      transform: scale(1.2);
    }
    .transform-box {
      background-color: #ff7043;
      transition: 0.4s;
    }
    .transform-box:hover {
      transform: rotate(15deg) scale(1.1);
      background-color: #ff5722;
    }
    .animate-box {
      background-color: #4caf50;
      animation: moveBox 3s infinite alternate;
    }
    @keyframes moveBox {
      0% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(150px);
        background-color: #81c784;
      }
      100% {
        transform: translateX(0);
        background-color: #388e3c;
      }
    }
  </style>
</head>
<body>
  <h1>CSS Animation, Transition & Transform</h1>
  <div class="container">
    <div class="box">Hover</div>
    <div class="transform-box">Rotate</div>
    <div class="animate-box">Move</div>
  </div>
</body>
</html>

▶️ Try Code Live

✅ Quick Recap:

transition – hover या change पर smooth effect देता है।
transform – element को move, rotate, scale, skew करता है।
@keyframes – animation sequence define करता है।
animation: – duration, direction, repetition control करता है।

ये तीनों concepts किसी भी professional web interface का base बनाते हैं।

💡 Tips & Best Practices (CSS में सुझाव और सर्वोत्तम प्रथाएँ)

CSS Tips & Best Practices – Professional Web Design के लिए ज़रूरी बातें

Web designing में सिर्फ code लिखना ही नहीं बल्कि उसे साफ, readable, और maintainable रखना भी बहुत ज़रूरी है। नीचे कुछ ऐसी tips दी गई हैं जो हर beginner को एक professional web developer बनने में मदद करेंगी।

1️⃣ Code Organization (कोड को व्यवस्थित रखना)

CSS file का नाम हमेशा meaningful रखें जैसे style.css या main.css.

हर section के लिए comments लिखें जैसे:


/* Header Section */
header { background: #fff; }

/* Footer Section */
footer { background: #f1f1f1; }

Repeated CSS code को avoid करें और classes का सही use करें।

2️⃣ Consistent Styling (समानता बनाए रखें)

पूरे web page में font, color, spacing और button style consistent होना चाहिए। इससे user experience बेहतर बनता है।


:root {
  --brand-color: #1f4ad1;
  --text-color: #333;
  --font-family: 'Segoe UI', sans-serif;
}

body {
  font-family: var(--font-family);
  color: var(--text-color);
}

button {
  background: var(--brand-color);
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background: #0b3ea9;
}

▶️ Try Code Live

3️⃣ Responsive Design (हर डिवाइस पर सही दिखना)

Website को mobile, tablet और desktop पर responsive बनाना आज की जरूरत है। इसके लिए media queries का इस्तेमाल करें।


.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

▶️ Try Code Live

💡 Tip: हमेशा अपने pages को Chrome DevTools (F12) से test करें — responsive views में।

4️⃣ Use External CSS File

हमेशा External CSS का इस्तेमाल करें ताकि HTML और CSS अलग रहें। इससे maintenance आसान और performance बेहतर रहती है।


<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to Boosting Skills</h1>
</body>

5️⃣ CSS Validation & Debugging

W3C CSS Validator (https://jigsaw.w3.org/css-validator/) का उपयोग करें।
Syntax errors (जैसे missing semicolons) हमेशा check करें।
Browser developer tools से layout inspect करें।

6️⃣ Performance Optimization

Unnecessary CSS rules हटा दें।
Images को compress करें।
CDN से CSS libraries (Bootstrap आदि) का उपयोग करें।
CSS file को minify करें ताकि loading fast हो।

7️⃣ Accessibility & SEO Friendly Design

Color contrast maintain करें ताकि visually impaired users को परेशानी न हो।
Alt text के साथ images add करें।
Heading tags (H1, H2, H3...) का सही क्रम रखें।
Inline styles avoid करें — external file से link करें।

✅ Remember: एक अच्छी CSS वही होती है जो — Readable, Reusable, Responsive, SEO Friendly, और Lightweight हो।

8️⃣ Golden Rule

“Code लिखने से पहले सोचिए कि maintain कौन करेगा — और वही बनाइए जो दो महीने बाद भी खुद को पढ़ने में आसान लगे!”

CSS (Cascading Style Sheets) – NIELIT O Level (M2-R5)

💡 What is CSS?

🔹 Definition:

🔹 Why is CSS Important?

🔹 Syntax of CSS:

Types of CSS — Inline, Internal & External

🔹 1) Inline CSS

🔹 2) Internal (Embedded) CSS

🔹 3) External CSS (Recommended)

CSS Selectors – Types & Deep Explanation

1️⃣ Universal Selector (*)

2️⃣ Tag Selector (Type Selector)

3️⃣ Class Selector (.classname)

4️⃣ ID Selector (#idname)

5️⃣ Descendant Selector (parent child)

6️⃣ Child Selector (parent > child)

7️⃣ Adjacent Sibling Selector (element + element)

8️⃣ General Sibling Selector (element ~ element)

9️⃣ Attribute Selectors

🔟 Group Selector (selector1, selector2, ...)

1️1️⃣ Pseudo-Class Selectors (:hover, :first-child etc.)

1️2️⃣ Pseudo-Element Selectors (::before, ::after etc.)

CSS Properties – Foundations to Practical Use

1) Colors & Units (रंग और इकाइयाँ)

2) Typography (Fonts, Text)

3) Background Properties (रंग, चित्र, repeat)

4) Box Model / Spacing (margin, padding, border, box-sizing)

5) Borders & Outline (सीमा रेखाएँ)

6) Display & Visibility

7) Sizing & Overflow

8) List Properties

9) Positioning (static, relative, absolute, fixed, sticky) & z-index

10) Flexbox (Modern Layout – Beginner Must-Know)

11) Float & Clear (Legacy – Exam Useful)

12) Effects: Shadow, Opacity, Cursor, Transitions

CSS Lists, Tables, Menus & Image Gallery – Practical Design Properties

1️⃣ CSS Lists (सूचियाँ सजाना)

2️⃣ CSS Tables (टेबल डिज़ाइन)

3️⃣ CSS Menu Design (Navigation Bar)

4️⃣ CSS Image Gallery (चित्र गैलरी)

CSS Tables – HTML and CSS Example with Deep Explanation

1️⃣ HTML Structure (टेबल की मूल संरचना)

2️⃣ CSS Styling (टेबल को स्टाइल देना)

3️⃣ Full Working Example (HTML + CSS Combined)

CSS Menu Design – Navigation Bar (Responsive + Hover + Active Link)

1️⃣ What is a Navigation Bar?

2️⃣ CSS Styling for Menu

3️⃣ Full Working Example (HTML + CSS Combined)

CSS Image Gallery – Responsive Grid Layout with Hover Effects

1️⃣ Image Gallery क्या होती है?

2️⃣ CSS Properties for Image Gallery

3️⃣ Full Working Example (HTML + CSS Combined)

4️⃣ Explanation of Important Properties

CSS Animation, Transition & Transform – Complete Beginner to Pro Guide

1️⃣ CSS Transition क्या है?

2️⃣ CSS Transform क्या है?

3️⃣ CSS Animation क्या है?

4️⃣ Full Working Example (HTML + CSS Combined)

CSS Tips & Best Practices – Professional Web Design के लिए ज़रूरी बातें

1️⃣ Code Organization (कोड को व्यवस्थित रखना)

2️⃣ Consistent Styling (समानता बनाए रखें)

3️⃣ Responsive Design (हर डिवाइस पर सही दिखना)

4️⃣ Use External CSS File

5️⃣ CSS Validation & Debugging

6️⃣ Performance Optimization

7️⃣ Accessibility & SEO Friendly Design

8️⃣ Golden Rule

1️⃣ Universal Selector (`*`)

3️⃣ Class Selector (`.classname`)

4️⃣ ID Selector (`#idname`)

5️⃣ Descendant Selector (`parent child`)

6️⃣ Child Selector (`parent > child`)

7️⃣ Adjacent Sibling Selector (`element + element`)

8️⃣ General Sibling Selector (`element ~ element`)

🔟 Group Selector (`selector1, selector2, ...`)

1️1️⃣ Pseudo-Class Selectors (`:hover, :first-child` etc.)

1️2️⃣ Pseudo-Element Selectors (`::before, ::after` etc.)