6 topics · Real UI patterns · Zero setup

CSS, style the web.

A practical CSS guide with real examples for layout, spacing, theming, motion, flexbox and grid. Every example runs live in the Preview tab.

Start Learning ↓ Open Editor →
HTML HTML Guide CSS CSS Guide JS JavaScript Guide
🎯 Selectors 📦 Box Model ↔️ Flexbox 🔲 Grid 🎨 Variables ✨ Animations
🎯

Selectors

Target exactly which elements to style.

Selectors tell CSS exactly what to style. In real projects they target buttons, cards, forms, navigation items, and specific states like hover, focus, active, or disabled. Learning selectors well means you stop fighting the stylesheet and start controlling it with intent.
Core UI selectors▶ Try it
/* Tag — all paragraphs */
p { color: #a0a0bc; }

/* Class — any element with .highlight */
.highlight { background: yellow; }

/* ID — unique element */
#header { font-size: 24px; }

/* Multiple — comma-separated */
h1, h2, h3 { font-weight: bold; }
Interactive states▶ Try it
/* On mouse hover */
button:hover {
  background: #6366f1;
}

/* First child in parent */
li:first-child { font-weight: bold; }

/* Every other row */
tr:nth-child(even) {
  background: rgba(0,0,0,0.05);
}
Layout relationships▶ Try it
/* Descendant — any p inside nav */
nav p { color: gray; }

/* Direct child only */
ul > li { list-style: none; }

/* Adjacent sibling */
h2 + p { margin-top: 0; }

/* Attribute selector */
input[type="email"] {
  border-color: blue;
}
📦

Box Model

Every element is a box with margin, border, padding and content.

The box model controls how every card, button, alert, and section takes up space. Once you understand padding, margin, border, and sizing, layouts stop feeling random. This is the foundation behind polished spacing and predictable responsive components.
Card spacing▶ Try it
.box {
  /* shorthand: top right bottom left */
  padding: 16px 24px 16px 24px;
  margin:  8px 0;   /* top/bottom left/right */

  /* or individual sides */
  padding-top:    16px;
  margin-left:   auto;  /* center trick */
}
Reliable component sizing▶ Try it
/* Best practice — apply globally */
*, *::before, *::after {
  box-sizing: border-box;
}

.card {
  width:   300px;
  padding: 24px;  /* included in 300px */
  border:  1px solid #333;
}
Card borders & corners▶ Try it
.card {
  border: 2px solid #6366f1;
  border-radius: 12px;

  /* or per-corner */
  border-top-left-radius: 24px;

  /* full circle */
  border-radius: 50%;
}
↔️

Flexbox

One-dimensional layout for toolbars, rows, buttons and cards.

Flexbox makes aligning items in a row or column easy. Set display: flex on the parent and control children with justify-content (main axis) and align-items (cross axis). It is one of the most common layout tools for navbars, pricing rows, filters, button groups, and responsive card layouts.
Toolbar layout▶ Try it
.nav {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding:         0 24px;
  height:          60px;
}
Center an empty state▶ Try it
/* Perfect centering */
.centered {
  display:         flex;
  justify-content: center;
  align-items:     center;
  min-height:      100vh;
}

/* flex-grow takes remaining space */
.spacer { flex: 1; }
Responsive feature cards▶ Try it
.card-row {
  display:        flex;
  flex-wrap:      wrap;     /* wrap to next line */
  gap:            16px;
}

.card-row .card {
  flex: 1 1 280px; /* grow shrink basis */
  min-width: 0;
}
Navbar actions▶ Try it
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toolbar .search {
  flex: 1;
}

.toolbar .actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
Responsive navbar▶ Try it
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.nav-links {
  display: flex;
  gap: 14px;
  list-style: none;
}

@media (max-width: 720px) {
  .site-header, .nav-links { flex-direction: column; }
}
Pricing plan row▶ Try it
.pricing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.pricing-card {
  flex: 1 1 260px;
  padding: 24px;
  border-radius: 18px;
}

.pricing-card.featured {
  transform: translateY(-6px);
}
🔲

CSS Grid

Two-dimensional layout for dashboards, galleries and app shells.

CSS Grid is ideal when the layout needs both rows and columns working together. That makes it perfect for dashboards, analytics panels, galleries, settings screens, pricing layouts, and admin pages where alignment matters in two directions at once.
Analytics cards grid▶ Try it
.grid {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   24px;
}

/* Same, using repeat() */
.grid {
  grid-template-columns: repeat(3, 1fr);
}
Template gallery grid▶ Try it
/* Automatically fits as many columns as possible */
.cards {
  display:               grid;
  grid-template-columns:
    repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
/* No media queries needed! */
Hero and sidebar spans▶ Try it
.hero {
  grid-column: 1 / -1;  /* full width */
}

.sidebar {
  grid-row: 1 / 3;  /* spans 2 rows */
}

.featured {
  grid-column: span 2;  /* 2 cols wide */
}
Dashboard areas▶ Try it
.dashboard {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-areas:
    "sidebar header"
    "sidebar main";
  gap: 20px;
}

.sidebar { grid-area: sidebar; }
.header { grid-area: header; }
.main { grid-area: main; }
Dashboard stat cards▶ Try it
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card {
  padding: 18px;
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.8);
}
🎨

Custom Properties

CSS variables — reuse values across your stylesheet.

CSS Custom Properties let you centralize theme colors, spacing, radius values, and typography tokens. They are especially useful for design systems, dark mode, white-label themes, and keeping components consistent across a product.
Define & use variables▶ Try it
/* Define on :root (global) */
:root {
  --color-accent: #6366f1;
  --spacing-md:   16px;
  --radius:       8px;
}

.btn {
  background:    var(--color-accent);
  padding:       var(--spacing-md);
  border-radius: var(--radius);
}
Dark / Light theming▶ Try it
:root {
  --bg:   #0f0f13;
  --text: #f0f0f8;
}

body.light {
  --bg:   #ffffff;
  --text: #0d0d1a;
}

body {
  background: var(--bg);
  color:      var(--text);
}
Fallback values▶ Try it
.card {
  /* Second arg is the fallback */
  color: var(--card-color, #a0a0bc);

  /* Override locally */
  --color-accent: #f97316;
}

/* Update via JavaScript */
// document.documentElement.style
//   .setProperty('--color-accent', '#f00')
✨

Animations

Transitions and keyframe animations — bring your UI to life.

CSS has two animation systems: transitions for state changes like hover or open/close, and keyframe animations for repeated or staged motion. Used well, they make interfaces feel responsive and intentional without adding JavaScript for simple motion.
Transitions▶ Try it
.btn {
  background:  #6366f1;
  transform:   translateY(0);
  transition:  all 0.2s ease;
}

.btn:hover {
  background:  #4f46e5;
  transform:   translateY(-3px);
  box-shadow:  0 8px 20px rgba(99,102,241,0.4);
}
@keyframes▶ Try it
@keyframes fadeUp {
  from {
    opacity:   0;
    transform: translateY(20px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.card {
  animation: fadeUp 0.5s ease both;
}
Pulse & Spin▶ Try it
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.dot {
  animation: pulse 2s ease infinite;
}
Toast slide-in▶ Try it
@keyframes slideInToast {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast {
  animation: slideInToast 0.35s ease-out both;
}
Shimmer loading card▶ Try it
@keyframes shimmer {
  from { background-position: -200% 0; }
  to { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, #0f172a 25%, #1e293b 50%, #0f172a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
Floating accent blob▶ Try it
@keyframes floatBlob {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-12px) scale(1.04);
  }
}

.blob {
  animation: floatBlob 4s ease-in-out infinite;
}
Staggered card reveal▶ Try it
@keyframes cardReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-list .card {
  animation: cardReveal 0.45s ease both;
}

.card-list .card:nth-child(2) { animation-delay: 0.12s; }
.card-list .card:nth-child(3) { animation-delay: 0.24s; }

Use these next steps to move from layout and styling fundamentals into structure, interactivity, and reusable package-driven components.

Review HTML structure Strong CSS becomes easier when the underlying markup is semantic and predictable. Add JavaScript interactions Pair CSS transitions and layouts with real behavior, events, and state changes. Bring in UI libraries Experiment with charts, helpers, and browser-compatible packages after your styling basics are solid. Test responsive ideas now Open the editor and tune spacing, grid, flexbox, themes, and motion in real time.

Ready to style something?

Open the editor and test real CSS patterns for spacing, layout, theming, motion, flexbox, and grid. Keep the Preview open and tune the values until the layout feels right.

⚡ Launch Editor ← Back to Learn

All examples work in the Preview tab · Free forever