CSS in Action

1. The display Property — The Most Misunderstood CSS Concept

Every HTML element has a default display value. This single property controls how an element behaves in the page flow. If you don't understand display, you'll be confused by CSS forever.

/* Make links behave like blocks (clickable buttons) */
nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: #8b5cf6;
  color: white;
  border-radius: 8px;
}

/* Hide an element completely */
.hidden {
  display: none;
}

Source: MDN — The display property

🛝 Try It: Display Playground

The three boxes below are <span> elements (inline by default). Try changing their display to inline-block or block. See how width and padding start working.

2. Pseudo-Classes — Styling States & Positions

Pseudo-classes let you style elements based on their state (is the user hovering? is the input focused?) or position (first child? every other row?). They start with a colon :.

State-based Pseudo-Classes

.btn {
  background-color: #8b5cf6;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

/* When the user hovers */
.btn:hover {
  background-color: #7c3aed;
}

/* When the user clicks (mouse down) */
.btn:active {
  transform: scale(0.98);
}

/* When input has keyboard focus */
input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

Position-based Pseudo-Classes

Source: MDN — Pseudo-classes

🛝 Try It: Hover Effects

Hover over the button below. Try changing the hover color, adding transform: scale(1.05), or changing the border-radius on hover.

3. CSS Transitions — Making Changes Smooth

Without transitions, hover effects are instant — the color snaps from purple to dark purple in 0ms. That feels cheap. Transitions add smooth animation between states.

.btn {
  background-color: #8b5cf6;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  transition: all 0.2s ease;  /* ← THE MAGIC LINE */
}

.btn:hover {
  background-color: #7c3aed;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

Source: MDN — Using CSS Transitions

🛝 Try It: Smooth Transitions

This card has a transition on hover. Try changing the duration (e.g., 0.5s), adding transform: translateY(-4px) on hover, or changing the box-shadow size.

4. box-shadow & text-shadow

Shadows add depth and make elements feel like they float above the page. Every modern card, button, and modal uses box-shadow.

/*  x-offset  y-offset  blur  spread  color */
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Subtle shadow (resting state) */
.card-subtle {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Elevated shadow (hover / modal) */
.card-elevated {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Colored shadow (accent glow) */
.btn-glow {
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3);
}

/* Text shadow */
.hero-title {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

Source: MDN — box-shadow

5. Background Properties & Gradients

Backgrounds can be solid colors, images, or gradients. Professional sites use gradients heavily — hero sections, buttons, cards.

Gradients

/* Linear gradient (top to bottom) */
.hero {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

/* Subtle gradient (almost flat) */
.section {
  background: linear-gradient(180deg, #fbfbfb, #f0f0f0);
}

/* Background image with overlay */
.hero-image {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
                     url('hero.jpg');
  background-size: cover;
  background-position: center;
}

Source: MDN — linear-gradient()

🛝 Try It: Gradient Playground

Edit the gradient angle and colors. Try 45deg, 90deg, or to right. Experiment with three-color gradients.

6. CSS Positioning — Breaking Out of the Flow

By default, elements flow top-to-bottom (block) or left-to-right (inline). Positioning lets you place elements outside this normal flow.

/* Badge on a card: relative parent + absolute child */
.card {
  position: relative;  /* creates positioning context */
  padding: 1.5rem;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #ff453a;
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

/* Fixed navigation bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

Source: MDN — CSS position

7. Overflow — What Happens When Content Doesn't Fit

When content is bigger than its container, the overflow property controls what happens:

/* Hide overflowing image corners in a rounded card */
.card {
  border-radius: 12px;
  overflow: hidden;  /* clips the image to the border-radius */
}

/* Scrollable chat panel */
.chat-messages {
  height: 400px;
  overflow-y: auto;  /* vertical scroll only when needed */
}

8. Opacity & Visibility

/* Dimmed disabled button */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Muted helper text */
.helper-text {
  opacity: 0.6;
}

9. CSS Variables (Custom Properties)

Hardcoding colors and sizes everywhere is a nightmare to maintain. CSS variables let you define values once and reuse them everywhere. When you change a variable, every usage updates automatically.

/* Define variables on :root (available everywhere) */
:root {
  --color-primary: #8b5cf6;
  --color-primary-dark: #7c3aed;
  --color-text: #1d1d1f;
  --color-text-muted: #515154;
  --color-bg: #fbfbfb;
  --color-border: #e5e5e7;
  --radius: 12px;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Use variables with var() */
.btn {
  background-color: var(--color-primary);
  border-radius: var(--radius);
}

.btn:hover {
  background-color: var(--color-primary-dark);
}

.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

Source: MDN — Using CSS Custom Properties

10. Width & Height — Auto, Min, and Max

Understanding how width and height behave prevents hours of frustration:

11. Build Challenge: Interactive Portfolio Upgrade

Take your styled portfolio from Lesson 4 and level it up with everything you learned in this lesson:

1. Open practices/lesson4-style.css (or create practices/lesson5-style.css)
2. Add CSS variables at the top:
   • Define --color-primary, --color-text, --color-bg, --color-border, --radius
   • Replace all hardcoded colors with var(--color-primary) etc.
3. Add hover effects on navigation links:
   • Color change on :hover
   • A transition: all 0.2s ease; on the base state
4. Add a project card with:
   • Border, padding, border-radius
   • box-shadow on hover (use transition!)
   • transform: translateY(-2px) on hover
5. Add a gradient to the header or hero section
6. Style the footer with opacity for muted text
7. Use overflow: hidden on the card if it has an image

Primary Source: For every CSS property, MDN CSS Reference is the canonical documentation. Also check Kevin Powell for CSS positioning and transitions videos.

Finished the build? Show me your updated portfolio and I'll review it before we move on to Flexbox layout.