Topic 6: CSS Advance

📖 5 min read · 🎯 intermediate · 🧭 Prerequisites: table-forms-page-layout-introduction, transition-animations

Why this matters

Up until now, you've been styling pages with the basics — colors, fonts, padding. It works, but you hit a wall fast. The layout breaks on mobile. The spacing feels off. You copy-paste the same values a dozen times. Here's the thing — Advanced CSS exists to solve exactly that. Grid, Flexbox, Variables, Media Queries, and power selectors aren't extras. They're the tools every real UI designer reaches for daily. Once these click for you, you'll look at any design — any layout, any screen size — and know exactly how to build it.

What You'll Learn

• Control complex two-dimensional layouts using CSS Grid
• Align and distribute items dynamically with Flexbox
• Centralize design tokens using Custom Properties (CSS Variables)
• Apply styles conditionally based on viewport size with Media Queries
• Target elements with precision using advanced CSS selectors

The Analogy

Think of your webpage as a city block. CSS Grid is the urban planner who decides where each building sits on the lot — both its column position and its row position, all at once. Flexbox is the interior designer who arranges furniture inside each room so it fills the space neatly, no matter how many chairs get added. CSS Variables are the city's style guide: one paint chip swatch that every contractor references so every building on the block shares the same color. Media Queries are the zoning laws that say "if the plot is narrower than 500 feet, stack the buildings vertically." Advanced selectors are the city inspector who can find every building with a blue door that faces north — with a single rule.

Chapter 1: CSS Grid Layout

CSS Grid is a two-dimensional layout system that gives you explicit control over both columns and rows simultaneously. Before Grid, engineers had to hack floats and clearfixes to achieve what is now a few lines of CSS.

Key properties:

• display: grid — activates grid on the container
• grid-template-columns — defines the number and size of columns
• gap — sets the spacing between grid cells

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

This creates three equal columns with 10 px gutters. The auto keyword tells each column to share available space equally.

Chapter 2: Flexbox Layout

Flexbox is a one-dimensional layout model — it arranges items along either a row or a column axis. It excels at aligning items inside a container and distributing leftover space, even when the number or size of items is unknown.

Key properties:

• display: flex — activates flexbox on the container
• justify-content — controls alignment along the main axis
• align-items — controls alignment on the cross axis

.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-item {
  padding: 10px;
}

space-around places equal space on both sides of each item, so the gaps between items are twice the gaps at the edges — useful for nav bars and card rows.

Chapter 3: Custom Properties (CSS Variables)

CSS Variables (formally Custom Properties) let you store values once on a parent element — typically :root so they are globally scoped — and reference them anywhere in the stylesheet. When the value needs to change, you update it in one place and the change propagates everywhere.

:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

Variables follow the cascade, so you can override them inside a scoped selector (e.g., .dark-theme { --main-color: white; }) without touching the root declaration. They also work inside calc(), making math-based spacing systems and fluid type scales straightforward.

Chapter 4: Media Queries

Media queries apply CSS rules conditionally based on the browser environment — most commonly viewport width. They are the backbone of responsive design.

@media (max-width: 600px) {
  .responsive-text {
    font-size: 14px;
  }
}

Common breakpoint strategy:

You can also query orientation (orientation: landscape), resolution (min-resolution: 2dppx for retina), and user preferences (prefers-color-scheme: dark).

Chapter 5: Advanced Selectors

CSS offers selectors that go far beyond class and ID matching. Attribute selectors, pseudo-classes, and pseudo-elements give you surgical precision.

Attribute selectors match elements whose attributes fit a pattern:

/* Matches any <a> whose href ends in ".com" */
a[href$=".com"] {
  background-color: yellow;
}

Pseudo-classes target elements in a particular state:

/* Styles only the first <p> of its type inside its parent */
p:first-of-type {
  color: red;
}

Other useful pseudo-classes: :nth-child(n), :not(selector), :focus-visible, :is(), :where().

Pseudo-elements let you style a specific part of an element without adding markup:

p::first-line {
  font-weight: bold;
}

Chapter 6: Putting It Together — Responsive Photo Gallery

The best way to see all five techniques interact is to build a photo gallery that adapts to any screen.

Step 0 — HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Advanced CSS Gallery</title>
</head>
<body>
  <div class="gallery">
    <div class="photo">Photo 1</div>
    <div class="photo">Photo 2</div>
    <div class="photo">Photo 3</div>
    <!-- Add more photos as needed -->
  </div>
</body>
</html>

Step 1 — CSS Grid for the layout:

repeat(auto-fill, minmax(200px, 1fr)) creates as many 200 px columns as fit in the viewport, stretching them to fill remaining space. No media query needed for the column count — Grid handles it automatically.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.photo {
  background-color: #ccc;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

Notice .photo uses Flexbox internally to center its label — Grid for the outer layout, Flexbox for the inner alignment.

Step 2 — Media query for very small screens:

Below 500 px, force a single-column stack so photos are never squeezed below 200 px wide.

@media (max-width: 500px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

Optional enhancement — CSS Variables for theming:

:root {
  --photo-bg: #ccc;
  --photo-height: 200px;
  --gap: 10px;
}

.gallery {
  gap: var(--gap);
}

.photo {
  background-color: var(--photo-bg);
  height: var(--photo-height);
}

flowchart TD
    A[Browser window] --> B{Viewport width}
    B -- "> 500px" --> C[Grid: auto-fill columns\nminmax 200px 1fr]
    B -- "≤ 500px" --> D[Grid: 1fr\nsingle column]
    C --> E[.photo uses Flexbox\nto center label]
    D --> E

🧪 Try It Yourself

Task: Build the responsive gallery above and add an advanced selector rule.

1. Copy the HTML structure into a new file gallery.html.
2. Add the CSS Grid layout and the Flexbox centering for .photo.
3. Add the @media (max-width: 500px) rule.
4. Add this attribute selector to highlight any photo whose data-category attribute starts with "art":

.photo[data-category^="art"] {
  border: 3px solid var(--main-color, steelblue);
}

Add data-category="art-print" to one .photo div and open the file in a browser.

Success criteria: At a wide viewport you see multiple columns. Narrow the browser window below 500 px and the gallery collapses to a single column. The photo with data-category="art-print" has a visible blue border.

🔍 Checkpoint Quiz

Q1. What does grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) do?

A) Creates exactly three columns each 200 px wide
B) Creates as many 200 px minimum columns as fit, stretching them to fill remaining space
C) Creates one column that is never narrower than 1fr
D) Requires a media query to change the column count

Q2. Given the following CSS, what color will <p> text be on a screen wider than 600 px?

:root { --main-color: blue; }
body  { color: var(--main-color); }
@media (max-width: 600px) {
  :root { --main-color: red; }
}

A) Red
B) Blue
C) Black (browser default)
D) It throws an error because variables cannot be inside media queries

Q3. What is the difference between justify-content and align-items in a flex container with flex-direction: row?

A) They are synonyms
B) justify-content aligns on the vertical axis; align-items on the horizontal
C) justify-content aligns on the horizontal (main) axis; align-items on the vertical (cross) axis
D) align-items only works on grid containers

Q4. You have a list of links and want to style only those pointing to PDF files. Which selector is correct?

A) a[href="pdf"] { color: red; }
B) a[href$=".pdf"] { color: red; }
C) a.pdf { color: red; }
D) a:last-of-type { color: red; }

A1. B — auto-fill places as many tracks as fit; minmax(200px, 1fr) sets the minimum width to 200 px and allows tracks to grow equally to fill the row.

A2. B — Blue. The media query that overrides --main-color to red only fires when the viewport is 600 px or narrower, so on a wider screen the root value blue is used.

A3. C — In a row-direction flex container, the main axis runs left-to-right, so justify-content controls horizontal distribution and align-items controls vertical alignment on the cross axis.

A4. B — The $= attribute selector matches values that end with the given string, so a[href$=".pdf"] targets all links whose href ends in .pdf.

🪞 Recap

• CSS Grid controls two-dimensional layouts (rows and columns) with minimal code.
• Flexbox handles one-dimensional alignment and space distribution inside containers.
• CSS Custom Properties centralize design tokens so global changes require a single edit.
• Media queries apply CSS conditionally based on viewport width (or other environment signals), enabling responsive layouts.
• Advanced selectors — attribute, pseudo-class, pseudo-element — give you precision targeting without adding extra classes to your HTML.

📚 Further Reading

• CSS Grid — MDN Web Docs — the definitive reference for every grid property and value
• Flexbox — CSS Tricks Complete Guide — visual cheatsheet covering every flex property
• Using CSS Custom Properties — MDN — scope, inheritance, and fallback values for variables
• Responsive Design with Media Queries — MDN — breakpoint patterns and best practices
• ⬅️ Previous: Transition Animations
• ➡️ Next: Div Page Design