CSS Fundamentals
Style, lay out, and debug real pages without fighting the cascade.
What's Inside
- 018 mins
Introduction to CSS
Learn what CSS does and how it connects to HTML
- 029 mins
Selectors and style rules
Use selectors to target elements clearly
- 038 mins
Text, colors, and backgrounds
Style readable text, colors, and backgrounds
- 046 mins
The box model
Understand content, padding, borders, and margin
- 058 mins
Sizing, borders, and rounded corners
Control box sizes, borders, radius, and shadows
- 066 mins
Spacing with margin, padding, and gap
Choose margin, padding, or gap for spacing
- 0710 mins
Cascade, specificity, and inheritance
Understand why one CSS declaration wins
- 088 mins
Debugging CSS with DevTools
Debug CSS problems with browser DevTools
- 098 mins
Block, inline, and display
Control block, inline, and display behavior
- 109 mins
Images, media, and backgrounds
Fit images, media, and backgrounds into boxes
- 1110 mins
Links, buttons, and states
Style links, buttons, and interaction states
- 129 mins
Flexbox layout
Arrange rows, columns, and gaps with Flexbox
- 138 mins
Grid layout
Build two-dimensional layouts with CSS Grid
- 148 mins
Responsive design
Make layouts adapt across screen sizes
- 159 mins
Container queries
Adapt components based on container size
- 1610 mins
Positioning and layers
Position elements without breaking layout
- 1710 mins
Overflow and scrolling
Handle clipped, scrolling, and overflowing content
- 1811 mins
Styling forms
Style form controls, labels, errors, and states
- 1910 mins
Modern selectors
Use modern selectors without extra classes
- 209 mins
CSS variables and organization
Organize reusable values with CSS variables
What you'll learn
- Connect CSS to HTML using stylesheets, selectors, rules, classes, and practical naming habits
- Style readable pages with fonts, colors, backgrounds, spacing, borders, sizing, images, and media
- Reason about the cascade, specificity, inheritance, display, and DevTools when CSS does not behave as expected
- Build common layouts with Flexbox, Grid, responsive media queries, container queries, positioning, overflow, and forms
- Use modern selectors, CSS variables, and organization habits that keep stylesheets easier to read and change
Meet the Author
The people behind this pack
Kamran is the founder of roadmap.sh and works on it full-time. Over the past decade he's shipped across startups and scale-ups, with most of his work in open source, he's a Google Developer Expert, a GitHub Star, and the second-most-starred developer on GitHub globally.
What are Lesson Packs?
Lesson packs are premium, opinionated guides written by the team. Pro members get access to all current and future lesson packs, including other pro benefits.
- Written by the team behind roadmap.sh
- Visual — diagrams and worked examples
- A clear, opinionated path per roadmap
- Unlocks every current and future pack
