Front-end Web Development CSS Flashcards

24 sample cards from the CSS deck

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

1. In CSS Grid, what is the difference between the explicit and implicit grid?

   The explicit grid is defined by `grid-template-rows/columns`. The implicit grid is auto-generated when items are placed outside the explicit grid; its track sizes come from `grid-auto-rows`/`grid-auto-columns` and flow direction from `grid-auto-flow`.

2. What are the five values of the CSS `position` property?

   `static` (default, normal flow), `relative` (offset from its normal position), `absolute` (positioned relative to the nearest positioned ancestor), `fixed` (positioned relative to the viewport), and `sticky` (toggles between relative and fixed based on scroll).

3. How does `position: absolute` determine its containing block?

   An absolutely positioned element is placed relative to its nearest ancestor whose `position` is not `static` (i.e. `relative`, `absolute`, `fixed`, or `sticky`). If no such ancestor exists, it is positioned relative to the initial containing block (viewport).

4. How does `position: relative` differ from `position: absolute` regarding document flow?

   A `relative` element stays in the normal flow and reserves its original space; the `top/left/etc.` offsets shift it visually without affecting other elements. An `absolute` element is removed from normal flow, so it no longer reserves space and other elements ignore it.

5. What is the difference between `position: fixed` and `position: sticky`?

   `fixed` removes the element from flow and pins it to the viewport so it stays put during scrolling. `sticky` keeps the element in flow and behaves like `relative` until a scroll threshold (set via `top`, etc.) is crossed, then it sticks like `fixed` within its containing block.

6. What does the `z-index` property control, and what is required for it to take effect?

   `z-index` controls the stacking order of overlapping elements along the z-axis (higher values appear in front). It only applies to positioned elements (`position` not `static`) or flex/grid items, and operates within stacking contexts.

7. What is a stacking context in CSS?

   A stacking context is a three-dimensional conceptual layer in which elements are stacked. It is created by the root element, positioned elements with a `z-index`, `opacity` less than 1, `transform`, `filter`, `will-change`, and others. `z-index` values only compete within the same stacking context.

8. What is the difference between a CSS transition and a CSS animation?

   A transition interpolates a property between two states triggered by a change (e.g. `:hover`), requiring a trigger and only running once per change. An animation uses `@keyframes` to define multiple intermediate states, can run automatically, loop, and play without a trigger.

9. What four properties does the `transition` shorthand combine?

   `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`. Example: `transition: opacity 0.3s ease-in 0.1s`.

10. What are the common values of a transition/animation timing function?

    `linear`, `ease` (default), `ease-in`, `ease-out`, `ease-in-out`, `step-start`, `step-end`, plus custom `cubic-bezier(x1, y1, x2, y2)` and `steps(n, jump)` functions.

11. What does the CSS `cubic-bezier()` timing function define?

    It defines a custom acceleration curve from two control points $$P_1 = (x_1, y_1), \quad P_2 = (x_2, y_2)$$ with the curve fixed between $(0,0)$ and $(1,1)$. The $x$ values must lie in $[0, 1]$, while $y$ values may exceed that range to create overshoot/bounce effects.

12. How do you define a CSS animation sequence, and how is it referenced?

    Define the sequence with a `@keyframes name { ... }` block using `from`/`to` or percentage stops (e.g. `0% { } 50% { } 100% { }`). Reference it on an element with `animation-name: name` (or the `animation` shorthand).

13. What properties control how many times a CSS animation repeats and its direction?

    `animation-iteration-count` sets the repeat count (a number or `infinite`). `animation-direction` sets play direction: `normal`, `reverse`, `alternate`, or `alternate-reverse`.

14. What does `animation-fill-mode` control?

    It defines what styles apply before the animation starts and after it ends. Values: `none` (default), `forwards` (retain final keyframe), `backwards` (apply first keyframe during delay), and `both`.

15. What is the difference between the `transform` properties `translate`, `scale`, and `rotate`?

    `translate(x, y)` moves an element, `scale(sx, sy)` resizes it (1 = original size), and `rotate(angle)` spins it around its transform origin, e.g. `rotate(45deg)`. They do not affect document flow and are GPU-accelerated.

16. Why are `transform` and `opacity` preferred for animations over properties like `width` or `top`?

    `transform` and `opacity` can be composited by the GPU without triggering layout (reflow) or repaint of other elements, producing smoother, higher-performance animations. Animating `width`, `top`, or `margin` forces layout recalculation, which is costly.

17. What is a media query, and what is its basic syntax?

    A media query applies CSS conditionally based on device characteristics. Syntax: `@media media-type and (feature: value) { rules }`, e.g. `@media screen and (max-width: 600px) { ... }`.

18. What is the difference between `min-width` and `max-width` media queries in responsive design?

    `min-width` applies styles when the viewport is at least the given width (mobile-first, scaling up). `max-width` applies styles when the viewport is at most the given width (desktop-first, scaling down).

19. What is the mobile-first approach to responsive design?

    Base styles are written for the smallest screens first, then progressively enhanced for larger viewports using `min-width` media queries. This keeps the default styles lightweight and ensures content works on constrained devices.

20. What does the viewport meta tag do for responsive design?

    `<meta name="viewport" content="width=device-width, initial-scale=1">` sets the layout viewport to the device width and the initial zoom to 1, allowing media queries and responsive layouts to render correctly on mobile devices instead of a scaled-down desktop view.

21. What is the difference between relative units `em` and `rem`?

    `em` is relative to the font-size of the element itself (or its parent for font-size), so it compounds through nesting. `rem` is relative only to the root element's (`<html>`) font-size, avoiding compounding.

22. What do the viewport units `vw` and `vh` represent?

    `1vw` equals 1% of the viewport's width and `1vh` equals 1% of the viewport's height. So `width: 50vw` is half the viewport width. Related units include `vmin` and `vmax` (1% of the smaller/larger viewport dimension).

23. How does the CSS `clamp()` function support responsive sizing?

    `clamp(min, preferred, max)` returns the preferred value but never below `min` or above `max`: $$\text{clamp} = \max(\text{min}, \min(\text{preferred}, \text{max}))$$ It is commonly used for fluid typography, e.g. `font-size: clamp(1rem, 2.5vw, 2rem)`.

24. What is the difference between `display: none` and `visibility: hidden`?

    `display: none` removes the element entirely from the layout, so it occupies no space and is not rendered. `visibility: hidden` hides the element visually but it still occupies its space in the layout.

What this deck covers

CSS flashcards FAQ