Frontend Web Development CSS & Styling Syllabus

In the `border` shorthand, what three values are set and in what conceptual order?

`border-width`, `border-style`, and `border-color` — e.g. `border: 2px solid #333`. The `border-style` is required for the border to appear; without it the border is not rendered.

How does `border-radius` accept values to make an elliptical corner?

You provide horizontal and vertical radii separated by a slash, e.g. `border-radius: 20px / 40px`, giving each corner a horizontal radius of $20\text{px}$ and vertical radius of $40\text{px}$. A single value makes circular corners.

Name the four layers of the CSS box model from innermost to outermost.

Content, then padding, then border, then margin.

Under the default `box-sizing: content-box`, how is the total rendered width of an element calculated?

$$\text{total width} = \text{width} + 2\times\text{padding} + 2\times\text{border}$$ Margins add outside this but are not part of the box's rendered size. The `width` property applies only to the content area.

How does `box-sizing: border-box` change width calculation, and why is it popular?

With `border-box`, the `width` includes content, padding, and border, so padding/border shrink the content area instead of enlarging the box. This makes sizing predictable, which is why `*{ box-sizing: border-box; }` is a common reset.

An element has `width: 200px`, `padding: 20px`, `border: 5px`, and `box-sizing: content-box`. What is its total rendered width?

$200 + 2(20) + 2(5) = 200 + 40 + 10 = 250\text{px}$.

Contrast the `display` values `block`, `inline`, and `inline-block`.

`block` takes full available width and starts on a new line, honoring width/height. `inline` flows within text, ignores width/height and top/bottom margins. `inline-block` flows inline like text but respects width/height and all margins/padding.

List the five values of the CSS `position` property and one defining trait of each.

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

For an `position: absolute` element, which ancestor does it position against?

The nearest ancestor with a `position` other than `static` (i.e. relative, absolute, fixed, or sticky). If none exists, it positions against the initial containing block (the viewport/`<html>`).

How does `position: sticky` behave relative to scrolling?

A sticky element scrolls normally until it reaches a specified offset (e.g. `top: 0`), then sticks in place like `fixed` while its containing block remains in view, releasing again when the container scrolls past.

What is margin collapsing, and between which margins does it occur?

Margin collapsing is when adjacent vertical margins combine into a single margin equal to the larger of the two, rather than summing. It occurs between vertical (top/bottom) margins of block-level boxes in normal flow — including parent/first-child and empty blocks. Horizontal margins never collapse.

When two collapsing margins are $30\text{px}$ and $20\text{px}$, what is the resulting margin?

$\max(30, 20) = 30\text{px}$ — the larger of the two, not their sum.

How do negative margins affect the collapsing calculation?

When both margins are negative, the more negative one is used. When one is positive and one negative, they are added together. For example, $40\text{px}$ and $-15\text{px}$ collapse to $40 + (-15) = 25\text{px}$.

Name two ways to prevent a parent's margin from collapsing with its child's top margin.

Add padding or a border to the top of the parent, set the parent's `overflow` to something other than `visible`, or establish a block formatting context (e.g. `display: flow-root`) on the parent.

What are the four values of the `overflow` property and what does each do?

`visible` (default; content spills outside the box), `hidden` (clips overflow, no scrollbars), `scroll` (always shows scrollbars), and `auto` (shows scrollbars only when needed).

What is a stacking context, and name two ways to create one.

A stacking context is a group of elements that stack together as a unit along the z-axis. It is created by, among others: the root element, a positioned element with a `z-index` other than `auto`, `opacity` less than 1, `transform`, `filter`, or `will-change`.

On what kinds of elements does the `z-index` property take effect?

`z-index` only affects elements that participate in a stacking context — primarily positioned elements (`position` other than `static`) and flex/grid items. On a plain `static` element it has no effect.

When you set `display: flex` on a container, what are the two axes called and how are they controlled?

The main axis (controlled by `flex-direction`: `row`/`column`) and the cross axis (perpendicular to it). `justify-content` aligns items along the main axis; `align-items` aligns them along the cross axis.

What do the three parts of the `flex` shorthand `flex: 1 1 0%` represent?

`flex-grow` (here $1$: how much the item grows to fill free space), `flex-shrink` (here $1$: how much it shrinks when space is tight), and `flex-basis` (here $0\%$: the item's initial main-size before growing/shrinking).

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).

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.

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.

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}$.

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.

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.

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.

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.

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.

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.

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.

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`.

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}$.

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.

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.

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()`.

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}$.

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.

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.

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`.

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.

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.

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.

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.