Frontend Web Development CSS & Styling Flashcards

24 sample cards from the CSS & Styling deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. What is the difference between `justify-content` and `align-content` in a flex container?

   `justify-content` distributes space along the main axis. `align-content` distributes space between rows along the cross axis and only has an effect when there are multiple lines (i.e. `flex-wrap: wrap` and content wraps onto multiple lines).

2. What does `align-self` do, and how does it relate to `align-items`?

   `align-items` sets the default cross-axis alignment for all flex items on the container. `align-self`, set on an individual item, overrides that default for just that item.

3. In CSS Grid, distinguish a grid track, a grid line, and a grid cell.

   A track is a row or column (the space between two adjacent lines). A grid line is the dividing line between tracks (numbered starting at 1). A cell is the intersection of one row track and one column track — the smallest unit.

4. What does the `fr` unit do in `grid-template-columns`, e.g. `grid-template-columns: 1fr 2fr`?

   `fr` distributes remaining free space in fractions. With `1fr 2fr`, leftover space is split into $1 + 2 = 3$ parts: the first column gets $\frac{1}{3}$ and the second gets $\frac{2}{3}$.

5. What does `repeat(auto-fill, minmax(200px, 1fr))` accomplish in a grid?

   It creates as many columns as fit, each at least $200\text{px}$ and at most $1\text{fr}$, automatically wrapping items into a responsive grid without media queries. `auto-fit` behaves similarly but collapses empty tracks so filled items stretch.

6. How do you define and place items using named grid areas?

   Use `grid-template-areas` on the container to draw a text map of named regions (each string is a row), then assign each child `grid-area: <name>`. A `.` denotes an empty cell, and each area must form a rectangle.

7. What does the `gap` property control, and how does its shorthand order work?

   `gap` sets spacing between flex/grid items (and multi-column layouts). `gap: 10px 20px` sets `row-gap: 10px` and `column-gap: 20px`; a single value applies to both. Unlike margins, gaps do not add space at the outer edges.

8. What is the difference between `justify-items`/`justify-self` and `align-items`/`align-self` in CSS Grid?

   `justify-*` aligns grid items along the inline (row/horizontal) axis within their cells; `align-*` aligns them along the block (column/vertical) axis. The `-items` form sets the container default; the `-self` form overrides it per item.

9. What does the `order` property do for flex and grid items, and what caveat applies?

   `order` (an integer, default $0$) changes the visual order in which items are laid out — lower values come first. Caveat: it changes only visual order, not DOM/source order, so tab focus and screen-reader reading order still follow the source.

10. When should you choose Flexbox versus CSS Grid?

    Use Flexbox for one-dimensional layouts (content arranged along a single row or column, sizing driven by content). Use Grid for two-dimensional layouts (rows and columns together, with an explicit layout structure). They can be nested and combined.

11. What is the core idea of a mobile-first CSS strategy?

    Write the base styles for the smallest (mobile) screens first, then use `min-width` media queries to progressively add or enhance layout for larger screens. This yields simpler base CSS and better performance on constrained devices.

12. Contrast `min-width` and `max-width` media queries in the context of mobile-first vs desktop-first design.

    `min-width` queries apply from a breakpoint upward (used in mobile-first, enhancing as screens grow). `max-width` queries apply up to a breakpoint (used in desktop-first, adapting downward). Mobile-first favors `min-width`.

13. Write a media query that applies styles only when the viewport is at least $768\text{px}$ wide.

    `@media (min-width: 768px) { /* styles */ }` — the rules inside apply when the viewport width is $\geq 768\text{px}$.

14. How do you combine conditions in a media query using `and`, and target orientation?

    Chain features with `and`, e.g. `@media (min-width: 600px) and (max-width: 900px) and (orientation: landscape)`. This applies only when width is between $600\text{px}$ and $900\text{px}$ and the device is in landscape.

15. What is the recommended viewport `<meta>` tag for responsive design, and why is it needed?

    `<meta name="viewport" content="width=device-width, initial-scale=1">`. It tells the browser to match the layout viewport to the device width and set zoom to $1$, so responsive CSS and media queries behave correctly on mobile.

16. What makes a layout 'fluid' rather than 'fixed', and which units support it?

    A fluid layout sizes elements in relative units so they scale with the viewport or container, rather than fixed pixels. Supporting units include `%`, `vw`/`vh`, `fr`, `em`/`rem`, and `ch`, often combined with `min()`, `max()`, and `clamp()`.

17. What does the `clamp(MIN, PREFERRED, MAX)` function do, and give a fluid-typography example.

    `clamp()` returns the PREFERRED value but never below MIN or above MAX. For fluid type: `font-size: clamp(1rem, 2.5vw, 2rem)` scales with the viewport yet stays between $1\text{rem}$ and $2\text{rem}$.

18. How does a container query differ from a media query?

    A media query responds to the viewport (or device) dimensions. A container query responds to the size of a specified ancestor container, letting a component adapt based on its own available space regardless of viewport — ideal for reusable components.

19. How do you set up an element to be queried by container queries, and how do you write the query?

    On the parent, declare `container-type: inline-size` (optionally `container-name: card`). Then query it with `@container card (min-width: 400px) { ... }`, styling descendants based on the container's width.

20. What is the `cqw` unit and what does it reference?

    `cqw` is a container query length unit where $1\text{cqw} = 1\%$ of the query container's width. Related units include `cqh` (height), `cqi` (inline size), `cqb` (block size), `cqmin`, and `cqmax`.

21. What four sub-properties does the `transition` shorthand combine, and in what order?

    `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay` — e.g. `transition: opacity 0.3s ease-in 0.1s`. The first time value is duration; the second is delay.

22. Name the common built-in CSS transition timing-function keywords and what `ease` does.

    `linear`, `ease` (default), `ease-in`, `ease-out`, `ease-in-out`, plus `steps()` and custom `cubic-bezier()`. `ease` starts slowly, speeds up in the middle, and slows down at the end.

23. What is the mathematical form of a `cubic-bezier()` timing function's control points?

    `cubic-bezier(x1, y1, x2, y2)` defines two control points $P_1 = (x_1, y_1)$ and $P_2 = (x_2, y_2)$ of a curve from $(0,0)$ to $(1,1)$. The $x$-values must satisfy $0 \leq x_1, x_2 \leq 1$, while $y$-values may exceed that range to create overshoot.

24. Why do transitions animate smoothly on `transform` and `opacity` but not on `display: none`?

    `transform` and `opacity` are animatable, continuously interpolable properties (and GPU-accelerated). `display` is discrete/non-animatable — historically it snaps instantly — so an element toggled to `display: none` disappears without a transition unless newer discrete-animation techniques (e.g. `@starting-style`, `transition-behavior: allow-discrete`) are used.

What this deck covers

CSS & Styling flashcards FAQ