CSS

What we will cover

Here's what's ahead on this page.

1. Animations — keyframe-based motion, beyond simple transitions
2. Responsive Design — media queries for different screen sizes
3. CSS Variables — reusable values across your stylesheet
4. Advanced Grid — named areas and more complex layouts
5. Specificity & the Cascade — how CSS decides which rule wins
6. Pseudo-elements — styling parts of an element that don't exist in HTML
7. Quiz — test what you've learned

Animations

Transitions (from Intermediate) only animate between two states — normal and hover, for example. Animations go further, letting you define multiple steps in between, and they can run automatically without needing any user interaction at all.

Defining an animation with @keyframes

@keyframes defines what the animation actually does at different points — think of each keyframe as a checkpoint the element passes through.

@keyframes slidein {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

Applying the animation

.box {
    animation: slidein 1s ease-in-out;
}

This tells the browser: use the slidein keyframes, run it over 1 second, with an ease-in-out pacing.

Multiple keyframe steps

Instead of just from/to, you can use percentages for more control over the animation's path.

@keyframes bounce {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}

.ball {
    animation: bounce 0.6s infinite;
}

infinite makes the animation repeat forever, instead of just running once.

Common animation properties

• animation-duration — how long one cycle takes
• animation-timing-function — the pacing (same options as transitions)
• animation-delay — waits before starting
• animation-iteration-count — how many times it repeats (or infinite)
• animation-direction — whether it reverses on alternate cycles

Key points

• @keyframes defines the steps of an animation
• The animation property applies it to an element
• Animations can run automatically, unlike transitions which need a trigger like hover
• infinite makes an animation loop forever

Responsive Design

Responsive design means your page adapts to whatever screen it's viewed on — phone, tablet, or desktop — instead of looking broken or tiny on smaller screens.

Media queries

A media query lets you apply CSS rules only when certain conditions are met — most commonly, screen width.

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
}

This says: "if the screen is 768px wide or narrower, hide the sidebar." Above that width, the rule simply doesn't apply.

min-width vs max-width

• max-width — applies the rule at that width and below (targeting smaller screens)
• min-width — applies the rule at that width and above (targeting larger screens)

@media (min-width: 1024px) {
    .container {
        max-width: 1000px;
        margin: 0 auto;
    }
}

Common breakpoints

There's no official rule for these, but a lot of projects roughly follow:

• Under 480px — phones
• 481px to 768px — larger phones, small tablets
• 769px to 1024px — tablets
• 1025px and up — laptops and desktops

Mobile-first vs desktop-first

Mobile-first means you write your base styles for small screens, then use min-width queries to add complexity as the screen grows. This tends to keep things simpler, since mobile layouts are usually the more stripped-down version anyway.

Responsive units

Using flexible units like %, vw, and rem (from Intermediate) alongside media queries makes a layout adapt more smoothly, rather than relying purely on fixed breakpoints.

Key points

• Media queries apply CSS conditionally, based on screen size
• max-width targets smaller screens, min-width targets larger ones
• Mobile-first design starts simple and adds complexity for bigger screens
• Flexible units work best paired with media queries, not instead of them