Techie BabajiLearn to Code. Build Real Skills.
Frontend track

CSS Tutorial

Style and lay out the web: the box model, Flexbox, Grid, responsive design and animation.

Beginner
Start: Introduction to CSS View all topics
0/26 complete
Topics
26
Full lessons
26
Est. hours
~5
Interview Qs
29

Overview

CSS (Cascading Style Sheets) controls how HTML looks: colour, typography, spacing, layout and motion. Modern CSS includes powerful layout systems — Flexbox and Grid — that replace most old float-based hacks.

You will learn how the cascade, specificity and inheritance decide which rule wins, and how to build layouts that adapt from phones to wide screens.

What you will learn

  • Understand the cascade, specificity and the box model
  • Build one-dimensional layouts with Flexbox and two-dimensional layouts with Grid
  • Write responsive, mobile-first styles
  • Add transitions and animations that respect user preferences

Prerequisites

You will get the most from this track if you already know:

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Fundamentals · 5 topics · Beginner
    Introduction to CSS · CSS Syntax · Selectors · Colors and Backgrounds · Typography
  2. 2Box Model · 5 topics · Beginner
    Box Model · Margin and Padding · Borders and Shadows · Display Properties · Positioning
  3. 3Layout · 4 topics · Beginner → Intermediate
    Flexbox · CSS Grid · Responsive Design · Media Queries
  4. 4Selectors & Effects · 5 topics · Intermediate
    Pseudo-Classes · Pseudo-Elements · Transitions · Animations · Transforms
  5. 5Architecture · 5 topics · Intermediate → Advanced
    CSS Variables · Specificity and Inheritance · Z-Index · CSS Architecture · Accessibility
  6. 6Practice · 2 topics · Advanced
    Responsive Website Project · CSS Interview Questions

Complete topic list

26 topics
1

Fundamentals

5 topics
  1. Introduction to CSSBeginner5m
  2. CSS SyntaxBeginner5m
  3. SelectorsBeginner5m
  4. Colors and BackgroundsBeginner5m
  5. TypographyBeginner5m
2

Box Model

5 topics
  1. Box ModelBeginner5m
  2. Margin and PaddingBeginner5m
  3. Borders and ShadowsBeginner5m
  4. Display PropertiesBeginner5m
  5. PositioningBeginner5m
3

Layout

4 topics
  1. FlexboxBeginner5m
  2. CSS GridBeginner5m
  3. Responsive DesignIntermediate5m
  4. Media QueriesIntermediate5m
4

Selectors & Effects

5 topics
  1. Pseudo-ClassesIntermediate5m
  2. Pseudo-ElementsIntermediate5m
  3. TransitionsIntermediate5m
  4. AnimationsIntermediate5m
  5. TransformsIntermediate5m
5

Architecture

5 topics
  1. CSS VariablesIntermediate5m
  2. Specificity and InheritanceAdvanced6m
  3. Z-IndexAdvanced6m
  4. CSS ArchitectureAdvanced5m
  5. AccessibilityAdvanced6m
6

Practice

2 topics
  1. Responsive Website ProjectAdvanced7m
  2. CSS Interview QuestionsAdvanced15m

Visual guides

2 diagrams
The CSS box model: margin, border, padding and contentmarginborderpaddingcontentwidth × heightcontent-box: width covers only this

Box Model

Every element is a box: content, wrapped in padding, then border, then margin.

Flexbox main axis and cross axis for flex-direction: rowdisplay: flexitem 1item 2item 3main axis → justify-contentcrossaxis ↓align-items

Flexbox

With flex-direction: row, justify-content works along the main axis and align-items along the cross axis.

Code example

A taste of the track, from Introduction to CSS.

HTMLYour first styled page Runnable
<style>
  body {
    font-family: system-ui, sans-serif;
    background: #f8fafc;
    padding: 20px;
  }
  h1 { color: #2965f1; }
  p  { color: #334155; line-height: 1.6; }
  .highlight { background: #fef08a; }
</style>


<h1>Hello, CSS!</h1>
<p>CSS makes this page look <span class="highlight">much nicer</span>.</p>
Expected output
A light-grey page with a blue heading, readable grey text and one highlighted phrase.
Opens this example in the full playground

Practice exercises

Introduction to CSS

Style a page so the background is light yellow, headings are dark green and paragraphs have a 1.5 line height.

CSS Syntax

Write one rule that gives all <h2> and <h3> elements a dark blue colour and 1.5rem bottom margin, plus a comment above it.

Selectors

Make every link inside a <footer> grey, and every <li> that is a direct child of .steps bold.

Colors and Backgrounds

Create a 200px-tall banner with a diagonal gradient from teal to navy and centred white text.

Typography

Style a paragraph with Georgia (serif fallback), 1.125rem size, 1.6 line height and a 60ch maximum width.

Box Model

A box has width: 300px, padding: 10px 30px and border: 5px solid with content-box sizing. What is its total rendered width? Then change it so the total is exactly 300px.

Show all 25 exercises
Margin and Padding

Make a button with 12px top/bottom and 24px left/right padding, and centre a 400px-wide container on the page.

Borders and Shadows

Create a 120px circular image with a 4px white border and a soft shadow.

Display Properties

Turn a row of <a> links into clickable buttons, each 100px wide with 10px padding, sitting side by side.

Positioning

Put a “SALE” label in the top-left corner of a product image container.

Flexbox

Centre a 200×200 box both horizontally and vertically inside a container that is 100vh tall.

CSS Grid

Create a gallery where each card is at least 160px wide, with 12px gaps, that adapts to any screen width.

Responsive Design

Make a .gallery that shows images in as many 150px-minimum columns as fit, with 10px gaps, and fluid images.

Media Queries

Hide .sidebar on screens narrower than 768px and show it as a 250px column from 768px up. Add a dark-mode background.

Pseudo-Classes

Make every third list item red and give text inputs a blue border when focused.

Pseudo-Elements

Add a small grey “#” before every h2, without changing the HTML.

Transitions

Make an image fade to 70% opacity and rotate 3 degrees over 300ms when hovered.

Animations

Create a “shake” animation that moves an element left and right 3 times in 400ms (for a wrong-password field).

Transforms

Make an arrow icon (▶) rotate 90 degrees smoothly when its parent <details> is open.

CSS Variables

Create --primary and --spacing variables on :root and use them for a .card’s border colour and padding. Add a fallback for --spacing.

Specificity and Inheritance

Calculate the specificity of: (a) nav ul li a (b) .menu .item:hover (c) #header .logo

Z-Index

A dropdown with z-index: 100 appears behind a sticky header with z-index: 10. The dropdown’s parent .toolbar has position: relative; z-index: 1. Fix it.

CSS Architecture

Write BEM class names for a navigation bar with a list of links, where the current link is highlighted.

Accessibility

A dropdown menu opens only on .menu:hover. Make it also open for keyboard users.

Responsive Website Project

Extend the page: add a dark theme using prefers-color-scheme by redefining only the colour variables.

Common interview questions

Frequently asked questions

Should I learn Flexbox or Grid first?
Learn Flexbox first for rows and columns of items, then Grid for whole-page and two-dimensional layouts. Real projects use both.
Do I need a CSS framework?
Not to start. Understanding plain CSS makes any framework (Tailwind, Bootstrap) easier to use and debug later.