🎨 Learn CSS — Cascading Style Sheets & Web Design
Welcome to the CSS Learning Path! CSS (Cascading Style Sheets) is the standard language used to control the visual presentation, styling, layout, typography, colors, animations, and responsive design of web pages.
🟢 Beginner to Advanced: Master CSS from syntax and selectors to the Box Model, Flexbox, Grid, Custom Properties, Responsive Web Design, Animations, Modern Selectors (
:has(),:is()), Dark Mode, Overflow, and Component Architecture.
🌐 Multilingual Explanation
English
CSS defines how HTML elements are styled and displayed across screen sizes (colors, typography, spacing, layouts, and animations).
Hindi
CSS web page ka color-combination, layout, fonts, margins, padding, flexbox, grid, aur responsiveness control karta hai.
Marathi
CSS mule HTML content la colors, fonts, spacing, layout, flexbox, grid, ani responsive design deun attractive banvle jaate.
📖 What You Will Learn
- Setting up CSS and connecting external stylesheets (
<link rel="stylesheet">) - Selectors, Combinators, Specificity calculation, the Cascade, and Inheritance rules
- Sizing, Width, Height, and CSS Units (
px,rem,em,%,vw,vh) - Backgrounds, Gradients, Borders, Shadows, and Color Formats (HEX, RGB, HSL)
- The CSS Box Model (
content,padding,border,margin) and Margin Collapse - Layout systems:
displaymodes,positioning,z-index, Stacking Context, Flexbox, and CSS Grid - Responsive Web Design, Viewport meta tags, Media Queries (
@media), and Container Queries (@container) - Pseudo-classes (
:hover,:focus,:nth-child), Pseudo-elements (::before,::after), and Advanced Selectors (:is(),:where(),:has()) - Typography, Web Fonts (
@font-face), CSS Transitions, Transforms (2D/3D), and@keyframesAnimations - CSS Custom Properties (Variables), CSS Functions (
calc(),min(),max(),clamp()), and DevTools - Modern CSS features (
aspect-ratio,object-fit, Logical Properties), BEM architecture, and Dark Mode (prefers-color-scheme) - Overflow management, Visibility, CSS Lists, Table styling, and UI components (Cards, Navigation bars, Forms)
📚 Complete Lesson Index
| # | Topic | Level | Link |
|---|---|---|---|
| 01 | Set Up CSS Environment | 🟢 Beginner | Open lesson |
| 02 | Introduction to CSS | 🟢 Beginner | Open lesson |
| 03 | History & Standards of CSS | 🟢 Beginner | Open lesson |
| 04 | Types of CSS (Inline, Internal, External) | 🟢 Beginner | Open lesson |
| 05 | How to Add CSS (<link> tag) |
🟢 Beginner | Open lesson |
| 06 | CSS Syntax & Rules | 🟢 Beginner | Open lesson |
| 07 | CSS Comments | 🟢 Beginner | Open lesson |
| 08 | Basic Selectors (Element, Class, ID, Grouping) | 🟢 Beginner | Open lesson |
| 09 | Specificity, Cascade & Inheritance | 🟡 Intermediate | Open lesson |
| 10 | Width and Height (min-width, max-width) |
🟢 Beginner | Open lesson |
| 11 | CSS Units (px, rem, em, %, vw, vh) |
🟢 Beginner | Open lesson |
| 12 | Backgrounds & Gradients | 🟢 Beginner | Open lesson |
| 13 | Borders, Border Radius & Box Shadows | 🟢 Beginner | Open lesson |
| 14 | Margins & Margin Collapse | 🟢 Beginner | Open lesson |
| 15 | Padding & Spacing | 🟢 Beginner | Open lesson |
| 16 | The CSS Box Model (box-sizing: border-box) |
🟢 Beginner | Open lesson |
| 17 | Display Property (block, inline, inline-block, none) |
🟢 Beginner | Open lesson |
| 18 | Positioning, z-index & Stacking Context |
🟡 Intermediate | Open lesson |
| 19 | Float and Clear Layouts | 🟢 Beginner | Open lesson |
| 20 | Flexbox Layout (Main & Cross Axes) | 🟡 Intermediate | Open lesson |
| 21 | CSS Grid Layout (2D Grids) | 🟡 Intermediate | Open lesson |
| 22 | Responsive Web Design Principles | 🟢 Beginner | Open lesson |
| 23 | Media Queries & Container Queries | 🟡 Intermediate | Open lesson |
| 24 | Pseudo-classes (:hover, :focus, :nth-child) |
🟢 Beginner | Open lesson |
| 25 | Pseudo-elements (::before, ::after) |
🟡 Intermediate | Open lesson |
| 26 | Text Styling & Typography | 🟢 Beginner | Open lesson |
| 27 | Web Fonts & @font-face |
🟢 Beginner | Open lesson |
| 28 | CSS Transitions | 🟢 Beginner | Open lesson |
| 29 | CSS Transforms (2D & 3D) | 🟡 Intermediate | Open lesson |
| 30 | CSS Animations (@keyframes) |
🟡 Intermediate | Open lesson |
| 31 | CSS Variables (Custom Properties) | 🟢 Beginner | Open lesson |
| 32 | CSS Functions (calc(), min(), max(), clamp()) |
🟡 Intermediate | Open lesson |
| 33 | The !important Rule |
🟢 Beginner | Open lesson |
| 34 | Browser Developer Tools for CSS | 🟢 Beginner | Open lesson |
| 35 | Styling Forms & Inputs | 🟢 Beginner | Open lesson |
| 36 | Card Layout Components | 🟢 Beginner | Open lesson |
| 37 | Navigation Bar Components | 🟢 Beginner | Open lesson |
| 38 | CSS Mini Projects | 🟡 Intermediate | Open lesson |
| 39 | Advanced Selectors (:is(), :where(), :has(), Combinators) |
🔴 Advanced | Open lesson |
| 40 | Modern CSS Features (aspect-ratio, object-fit, Logical Props) |
🟡 Intermediate | Open lesson |
| 41 | CSS Architecture (BEM), @supports & Dark Mode |
🔴 Advanced | Open lesson |
| 42 | Overflow & Visibility (overflow, clip-path) |
🟢 Beginner | Open lesson |
| 43 | CSS Lists & Table Styling (list-style, border-collapse) |
🟢 Beginner | Open lesson |
🎯 Suggested Learning Flow
01–07 Setup & Syntax → 08–16 Selectors, Values & Box Model → 17–23 Layouts (Flexbox, Grid) & Responsive Design → 24–33 Pseudo-elements, Variables, Animations & Functions → 34–38 Components & Mini Projects → 39–43 Advanced Selectors, Modern Features & Architecture
✅ Progress Checklist
- I can link external CSS stylesheets to HTML files cleanly using
<link>. - I understand CSS specificity scoring, the cascade, and inheritance rules.
- I master the CSS Box Model and always declare
box-sizing: border-box. - I can build 1D flex layouts and 2D grid layouts confidently.
- I know how to align Flexbox items along both main and cross axes.
- I can write mobile-first responsive media queries and fluid sizing with
clamp(). - I can create smooth UI transitions, 2D/3D transforms, and
@keyframesanimations. - I can style UI components (cards, navbars, forms) and dark mode themes using CSS Variables.
🧭 Navigation
| ← Repository Home | Start with Lesson 01 → |