Guest Mode:
BCA Student Stories & UpdatesLive
You
Day 9CSS Foundation2 Hours Practical
Push to GitHub to Complete
CSS Selectors & Basic Styling
CSS Selectors dictate WHICH HTML elements your style rules target. Mastering selectors gives you pinpoint control over styling without writing redundant code.
Interactive Learning Roadmap
Day 9 Step-by-Step Practical Flow
🎯1. What You Will Learn Today
✔Master element/type selectors, class selectors (`.class`), and ID selectors (`#id`).
✔Understand selector specificity and inheritance.
✔Use descendant selectors (`div p`) and grouping selectors (`h1, h2, h3`).
✔Apply hover pseudo-classes (`:hover`, `:active`, `:focus`).
Day 9 MasterclassCSS Foundation
CSS Selectors & Basic Styling — Comprehensive Practical Guide
Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.
Real-World Purpose Aur Zaroorat
CSS Selectors dictate WHICH HTML elements your style rules target. Mastering selectors gives you pinpoint control over styling without writing redundant code.
Element selectors target every instance of an HTML tag (e.g. `p { ... }`).
Class selectors (`.badge`) can be reused across any number of elements.
ID selectors (`#navbar`) target a single unique element on the page.
Pseudo-classes like `:hover` style elements based on user interaction states.
Dimaag Mein Bithane Ka Model
"Selectors are like search filters. Element is "everyone wearing a shirt", class is "everyone on Team Blue", and ID is "Rahul Sharma specifically"."
💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.
👨🏫3. Teacher Demonstration Code
See how classes enable modular, reusable styling.
Class vs ID vs Pseudo-Class Stylescss
/* Element Selector */
body {
font-family: Arial, sans-serif;
color: #333333;
}
/* Reusable Class Selector */
.btn-primary {
background-color: #04AA6D;
color: #ffffff;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
display: inline-block;
transition: background-color 0.2s ease;
}
/* Interactive Hover State */
.btn-primary:hover {
background-color: #038a58;
}
/* Unique ID Selector */
#main-header {
border-bottom: 2px solid #e2e8f0;
padding: 16px 0;
}2. Hands-On Practical Lab: Follow Instructions in VS Code
Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.
2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type
Day 9 Practical Task Test Studio
Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Style the .card Class
In the `<style>` block, create a `.card` rule setting `padding: 20px;` and `background-color: #0c1328;`.
⏳ WAITING
Task 2Add Hover State
Add a `.card:hover` rule setting a different border or background.
⏳ WAITING
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing ActiveTab inserts 2 spaces • Live DOM refresh239 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
LiveRenders live HTML & CSS typed on the left.
Interactive Bug Detective
Spot the Bug: Confusing Dot and Hash in Selectors
Tap or click on the exact line below that contains the error:
Click any code line⚠️ Broken Code Inspector
Tap buggy line1
/* Trying to style <button id="submitBtn" class="btn"> */2
#btn {3
color: red;4
}5
.submitBtn {6
background: blue;7
}Stuck? Need a detective clue before checking the solution?
Senior Developer Forensic Analysis:
Dots (.) are for CLASSES, and hashes (#) are for IDs! The developer inverted them. The selector should be #submitBtn and .btn.
Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!
📝Independent Practice: Assignment
📄 component-library.htmlHomework Task: Component Library Card Sheet
- •Create a webpage demonstrating 4 reusable button variants using classes:
- •`.btn-success` (Green background), `.btn-danger` (Red background), `.btn-warning` (Amber background), and `.btn-outline` (Transparent with border).
- •Add smooth `:hover` transition effects to all buttons.
- •Use grouping selectors (`.btn-success, .btn-danger, ...`) for shared padding and font styles.
Submission Evaluation Criteria: Ensure all buttons use shared classes to prevent repeating code (DRY - Don’t Repeat Yourself).
Exact Assignment Solution Code: component-library.html
Open Visual Studio Code on your PC (code .), create component-library.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BCA Day 9 - Reusable Button Component Library</title>
<style>
/* Reset & Page Background */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #0b1120;
color: #f8fafc;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
/* Container Card Sheet */
.card-sheet {
background-color: #1e293b;
border: 1px solid #334155;
border-radius: 16px;
padding: 32px;
max-width: 650px;
width: 100%;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
}
.card-sheet h1 {
font-size: 24px;
margin-bottom: 8px;
color: #38bdf8;
}
.card-sheet p {
font-size: 14px;
color: #94a3b8;
margin-bottom: 24px;
line-height: 1.6;
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 24px;
}
/* DRY Principle: Shared Button Base Styles via Grouping Selector */
.btn,
.btn-success,
.btn-danger,
.btn-warning,
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 22px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
text-decoration: none;
border: 2px solid transparent;
transition: all 0.25s ease-in-out;
outline: none;
}
/* 1. Success Variant (Green background) */
.btn-success {
background-color: #16a34a;
color: #ffffff;
border-color: #16a34a;
}
.btn-success:hover {
background-color: #15803d;
border-color: #15803d;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.4);
}
/* 2. Danger Variant (Red background) */
.btn-danger {
background-color: #dc2626;
color: #ffffff;
border-color: #dc2626;
}
.btn-danger:hover {
background-color: #b91c1c;
border-color: #b91c1c;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4);
}
/* 3. Warning Variant (Amber background) */
.btn-warning {
background-color: #f59e0b;
color: #0f172a;
border-color: #f59e0b;
}
.btn-warning:hover {
background-color: #d97706;
border-color: #d97706;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}
/* 4. Outline Variant (Transparent with border) */
.btn-outline {
background-color: transparent;
color: #38bdf8;
border-color: #38bdf8;
}
.btn-outline:hover {
background-color: #38bdf8;
color: #0b1120;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(56, 189, 248, 0.4);
}
/* Active click effect for all button variants */
.btn-success:active,
.btn-danger:active,
.btn-warning:active,
.btn-outline:active {
transform: translateY(0);
box-shadow: none;
}
/* Architecture explanation callout */
.code-note {
background-color: #0f172a;
border-left: 4px solid #38bdf8;
padding: 14px 18px;
font-size: 13px;
color: #cbd5e1;
border-radius: 6px;
line-height: 1.5;
}
</style>
</head>
<body>
<main class="card-sheet">
<h1>🎨 Component Library: Button Variants</h1>
<p>Demonstrating reusable button classes built with CSS grouping selectors, pseudo-classes (<code>:hover</code>, <code>:active</code>), and the DRY principle.</p>
<div class="button-group">
<button type="button" class="btn-success">✔ Save Changes</button>
<button type="button" class="btn-danger">✖ Delete Account</button>
<button type="button" class="btn-warning">⚠ Warning Alert</button>
<button type="button" class="btn-outline">🔍 View Details</button>
</div>
<div class="code-note">
<strong>DRY Architecture Note:</strong> Common properties (<code>padding</code>, <code>font-size</code>, <code>border-radius</code>, <code>transition</code>, <code>cursor</code>) are declared once using grouping selectors. Each variant only overrides colors and shadow effects.
</div>
</main>
</body>
</html>Verified Assignment Code Solution (100% Tested & Ready to Run)
🎓4. Viva Check: Mandatory Conceptual Test
Which of the following selectors has the highest CSS specificity value?
5. Mandatory Step: Push to GitHub to Unlock Next Lesson
Target Repo: html-css-projects
Windows 11 Terminal / VS Code
main
1$
git add .
Stage all modified files and new assets for commit
2$
git commit -m "Day 09: CSS selectors hierarchy and reusable UI component classes"
Commit staged changes with a descriptive message
3$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ RequiredVS Code Implementation
Step 4 Viva Check
Own GitHub Project
RequiredExact GitHub Setup Guide & Expected Structure
Day 9 RequirementsFollow these exact folder and file names to prevent verification errors.
1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-09/ or bca-day-9/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 9
main
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 9
4$
mkdir day-09
Create a new project folder (day-09)
5$
cd day-09
Change working directory to day-09
6$
# 3. Create your code file: index.html
7$
# (Write your Day 9 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 09: CSS Selectors & Basic Styling"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + Vor right-click in Windows Terminal / VS Code✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase
index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.2.Separate Day Folders: Create a new folder
day-09/ for today so you don't overwrite previous days.3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch
main.📁 github.com/YOUR_USERNAME/html-css-projects
Branch: mainREADME.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/✨ CREATE THIS FOLDER FOR TODAY (Day 9)
└──index.htmlMust contain: <audio controls>, <video controls>, <iframe>
Sequential Progression Enforced
You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 9 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 8: CSS Introduction & Connecting CSS to HTML first.
Complete Day 8 FirstCurriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal