Internet Programming Laboratory
Unit 3: CSS3 & Modern Layouts
Selectors, Specificity, Box Model, Flexbox, Grid, CSS Variables, Typography, Responsive Design, Transitions & Animations — the visual layer that turns HTML skeletons into stunning, production-ready interfaces.
🏢 Industry-Aligned | 📝 15 MCQs (Bloom's Taxonomy) | 🔬 5 Lab Exercises | 💼 Interview Prep
Why This Chapter Matters in 2025
HTML gives you the skeleton. CSS gives you the skin, clothes, and personality. Without CSS, every website on earth would look like a plain text document from 1995. The difference between a ₹500/month freelancer and a ₹15 LPA frontend engineer? Mastery of CSS layout, responsiveness, and modern design patterns.
Here's a reality check: Flexbox and CSS Grid are now used in 97% of production websites worldwide. If you still use float: left to build layouts in 2025, your code will be rejected in every company code review.
🏢 Industry Connection — Who Relies on CSS3 in Production?
CRED — their dark-themed, glassmorphic UI? Every gradient, every smooth card hover, every subtle animation is pure CSS3. Their design team writes CSS Variables for the entire theme system — change one variable, the whole app changes.
Swiggy — their restaurant grid? CSS Grid. Their mobile menu? Flexbox. Their "Add to Cart" animation? CSS @keyframes. Swiggy's frontend team rejected float-based layouts in 2018.
Zerodha (Kite) — India's largest stock trading platform. Their real-time trading dashboard uses CSS Grid for the multi-panel layout, CSS Variables for light/dark theme switching, and media queries for tablet-to-desktop responsiveness. Zero JavaScript for layout.
Prerequisite Checklist ✅
- ✅ Completed Unit 1 & 2 (HTML5 fundamentals — you need elements to style)
- ✅ VS Code with the Live Server extension installed (instant preview on save)
- ✅ Chrome DevTools — you'll live in the "Elements → Styles" panel this entire unit
- ✅ Basic understanding of HTML tags, classes, and IDs
<font> tags and <table> layouts. A single colour change required editing every page manually. CSS changed everything — one stylesheet, one change, every page updated.Learning Outcomes — Bloom's Taxonomy
| Bloom's Level | Learning Outcome |
|---|---|
| L1 — Remember | Recall the syntax for CSS rules, selectors (type, class, id, attribute, pseudo-class, pseudo-element), and the box model components |
| L2 — Understand | Explain how CSS specificity and the cascade determine which styles are applied when rules conflict |
| L3 — Apply | Build responsive layouts using Flexbox and CSS Grid, apply Google Fonts, and implement CSS Variables for a design system |
| L4 — Analyze | Debug layout issues using Chrome DevTools — inspect computed box model, identify specificity conflicts, and diagnose overflow problems |
| L5 — Evaluate | Compare Flexbox vs Grid for a given layout requirement and justify which approach is more maintainable and performant |
| L6 — Create | Design and implement a complete, responsive, themed landing page for an Indian startup using CSS3, Flexbox, Grid, variables, and animations |