Skip to content
C Codeloom

Topics / CSS

🎨

CSS

Styling the web. Layout, color, typography, and responsive design.

Browse 13 tutorials → Other topics

Why learn CSS?

  • Controls everything visual on the web — layout, color, motion.

  • Modern CSS (Grid, Flexbox, custom properties, container queries) is genuinely powerful.

  • A small CSS skill jump separates "looks like Bootstrap" from "looks designed".

  • Browsers natively support most of what designers want now.

What you can build with CSS

Visual design for any site or app Responsive and mobile-first layouts Themes and design systems Animations and transitions

CSS tutorials

13 articles

Hand-written tutorials, ordered as a recommended learning path.

  1. 01 What is CSS? A clear introduction to CSS — what it is, how it connects to HTML, how selectors and the cascade work, and how to write your first stylesheet from scratch.
  2. 02 The Box Model Every element on a web page is a rectangular box. This guide explains the four layers of that box — content, padding, border, and margin — and the box-sizing fix that makes them sane.
  3. 03 Flexbox Basics Flexbox is the modern tool for one-dimensional layout. This guide covers the container and item properties you need to align, distribute, and wrap any row or column of elements.
  4. 04 CSS Grid CSS Grid is the modern tool for two-dimensional layout. This guide covers tracks, the fr unit, gaps, spans, and responsive grids — everything you need to build real page layouts.
  5. 05 Selectors Selectors decide which elements get styled; specificity decides which rule wins when more than one applies. This guide covers every selector you need and how to read a specificity score.
  6. 06 Responsive Design Responsive design makes a single site look right on every screen. This guide covers the viewport meta tag, mobile-first thinking, media queries, fluid units, and responsive images.
  7. 07 What Is Tailwind? An honest introduction to Tailwind CSS — what utility-first means, the design-token system, the JIT engine, the ugly-HTML tradeoff, and when component CSS is still better.
  8. 08 Install & Setup A practical walkthrough of installing Tailwind CSS v4 in a new project — the npm package, the @import directive, content sources, and quick integration notes for Vite and Astro.
  9. 09 Layout Utilities A practical tour of Tailwind's layout utilities — flex and grid, alignment, gap, padding and margin, width and height, and responsive prefixes — built around a real card layout example.
  10. 10 Animations & Transitions A practical guide to CSS transitions and @keyframes animations — properties, timing functions, transform-based performance, the animation shorthand, and prefers-reduced-motion.
  11. 11 Colors & Themes How to work with Tailwind's color palette — opacity modifiers, arbitrary values, CSS variables for theming, the dark: variant, and configuring tokens with @theme in Tailwind v4.
  12. 12 Component Patterns Practical patterns for building reusable buttons, cards, and form controls in Tailwind — including variants, the @apply debate, and when to extract a component.
  13. 13 CSS Variables A practical guide to CSS custom properties — declaring them, using var() with fallbacks, scoping by the cascade, building a light/dark theme, and updating them dynamically from JavaScript.