Glossary

130 terms from CSS Layout and Responsive Design, in plain words, each with the chapter that teaches it.

Search the glossary

#

!important: A flag after a value that makes a declaration beat every normal declaration, whatever its specificity. It makes CSS hard to override, so use it only for safety nets like the reduced-motion rule.
::before / ::after (pseudo-elements): Extra boxes that CSS can add before or after an element's content without any extra HTML. Kettle & Crane uses `::after` for the "New" badge and the dotted leader line on the menu.
:focus-visible / :focus-within: `:focus-visible` matches a focused element when a ring should show (mostly after keyboard use); `:focus-within` matches an element with focus anywhere inside it.
:has(): A pseudo-class that matches an element containing something that matches its argument, letting a parent be styled by its contents, like a card holding a sold-out label.
:is() / :where(): Pseudo-classes that match any selector in a list. `:is()` counts as its most specific argument while `:where()` always has zero specificity, so it suits overridable defaults.
:root: A pseudo-class matching the page's root element, `<html>`; the usual place to define variables so they're available everywhere.
@container: An at-rule whose rules apply depending on the width of the nearest container element, not the window. A product card can then lay itself out differently in a narrow sidebar and a wide main area.
@keyframes: An at-rule that defines the steps of an animation as percentages of its duration. You attach it to an element with the `animation` property.
@layer (cascade layers): Named groups of rules whose order you declare once. A rule in a later layer beats a rule in an earlier one whatever their specificity, and unlayered rules beat all layers.
@media: An at-rule that applies CSS only when a condition is true, such as the window being at least 48rem wide. The condition is made from a media feature such as `width` or `prefers-color-scheme`.

A

align-content: Places whole rows (or lines) inside a grid or flex container. `align-content: start` packs them at the top instead of stretching them to fill the height.
align-items: Places flex or grid items along the cross axis, for example `center` to line up their middles. In a row, the default `stretch` makes all items as tall as the tallest.
align-self: A property on one flex item that aligns it differently from the rest, using the same values as `align-items`.
alt: The `<img>` attribute that gives a text description of the picture, for screen readers and for when the image can't load.
Animation: Movement defined with `@keyframes` that runs by itself through as many steps as you like, unlike a transition, which needs a state change.
aria-current: An HTML attribute that tells screen readers which link or item is the current one. Kettle & Crane's CSS also uses it to highlight the active filter.
aspect-ratio: Sets a box's shape as width divided by height, such as `4 / 3` or `1` for a square. Give the box a width and the browser works out the height.
At-rule: A CSS rule that starts with `@`, such as `@media`, `@container`, `@keyframes` or `@layer`, and usually wraps other rules.
Attribute selector: A selector that matches elements by an attribute in square brackets, such as `[data-theme="dark"]` or `a[aria-current]`.
auto-fit / auto-fill: Keywords used in `repeat()` so the grid makes as many columns as fit. `auto-fill` keeps empty columns when there are few items, so cards keep their size.

B

Baseline: A label from web.dev for features that work in all major browsers. "Widely available" means they have for at least 30 months.
BEM (block, element, modifier): A class naming pattern: a block is a component (`.card`), an element is a part joined by two underscores (`.card__title`), and a modifier is a variation joined by two hyphens (`.card--sale`).
Block box: A box that starts on a new line and takes the full available width, like headings, paragraphs and `<div>`. Blocks stack top to bottom.
border-radius: Rounds a box's corners. A very large value such as `999px` gives fully rounded ends, a "pill" shape used for tags, filters and badges.
Box model: Every element is a box made of content, then padding (space inside the border), a border, and margin (space outside it).
box-shadow: Draws a shadow around a box from values for across, down, blur and color, such as `0 2px 6px rgb(0 0 0 / 0.15)`.
box-sizing: border-box: Makes `width` include padding and border, so a 250px box stays 250px wide. By default `width` covers only the content.
Breakpoint: A width at which a media query changes the layout. Choose them by widening the window until the layout looks wrong, not from device lists.

C

calc(): A CSS function that does arithmetic with mixed units, like `calc(100% - 2rem)`. Leave spaces around `+` and `-`.
Cascade: The way the browser decides which rule wins when several set the same property: more specific selectors win, and if equal, the later one wins.
Cell: The space where one grid row and one grid column cross. Items fill cells in order.
ch: A unit equal to the width of the "0" character in the current font. `65ch` is roughly 65 characters, a comfortable reading line length.
Child combinator: The `>` in a selector, matching only direct children. `.page > header` skips headers nested deeper.
clamp(): A function that takes a minimum, preferred and maximum value and uses the preferred value without going outside the limits. It gives fluid sizes, like Kettle & Crane's heading between 28px and 48px.
color-scheme: A property telling the browser which themes your page supports, so it draws form fields and scroll bars to match. It's also needed for `light-dark()` to work.
Container: An element marked with `container-type` so `@container` queries can test its size. The container can't change itself, only its children.
container-type: A property that makes an element a container for container queries; `inline-size` tracks its width.
Containing block: The box an absolutely positioned element's offsets are measured from: its nearest positioned ancestor, or the whole page if there is none.
content: A property that gives a pseudo-element its text, e.g. `content: "New"`. `content: ""` makes an empty box that still exists.
Contrast ratio: A measure of how different two colors' brightness is, from 1:1 to 21:1. WCAG asks for at least 4.5:1 for normal text.
Cross axis: The flexbox axis at right angles to the main axis; top to bottom in a row.
Custom property (CSS variable): A value stored under a name starting with `--` and read with `var()`. Because they're inherited, setting one on an element changes it for everything inside.

D

data- attributes: HTML attributes starting with `data-` whose names you invent, such as `data-theme="dark"`; CSS can select them.
Declaration: A property, a colon, a value and a semicolon, like `color: #222;`.
Design tokens: A site's basic choices (colors, sizes, spacing, radius, fonts) stored as a small set of variables that every other rule uses.
Desktop first: Writing the wide layout first, then undoing parts of it with `width <` queries. It usually needs more code than mobile first.
Device toolbar: A DevTools mode (Responsive Design Mode in Firefox) for viewing a page at any width or phone size. It imitates a phone's screen but not its browser.
DevTools: The inspection tools built into browsers, showing an element's HTML, applied rules, computed values and box measurements.
display: Sets what kind of box an element makes: `block`, `inline`, `inline-block`, `none`, `flex` or `grid`.
doctype: The first line of an HTML page. Without it browsers use an old "quirks mode" that changes some sizes.

E

em: A unit that is a multiple of the element's own font size.

F

Fallback value: The second value in `var(--name, fallback)`, used when the variable isn't set anywhere.
fixed: A `position` value that pins a box relative to the window so it stays put when the page scrolls, and it no longer takes space.
flex: Shorthand for grow, shrink and basis, such as `flex: 1 1 220px`. `flex: 1` means `1 1 0`: take an equal share of all the space.
Flex container / item: With `display: flex`, a parent becomes a flex container and its direct children become flex items arranged along a line. Grandchildren aren't affected.
flex-direction: Sets the main axis of a flex container: `row` (default) or `column`.
flex-grow, flex-shrink, flex-basis: Properties on flex items: shares of spare space taken (default 0), shares of missing space given up (default 1), and the starting size (default `auto`).
flex-wrap: With `wrap`, flex items move onto a new line when they don't fit, instead of squeezing on one line.
Fluid: Sizing that changes smoothly with the window instead of jumping at breakpoints, usually with viewport units and `clamp()`.
Focus: The state of the element that receives keyboard input, such as a link reached with Tab. Browsers draw a focus ring by default.
fr: A grid unit meaning a fraction of the leftover space after fixed sizes and gaps are removed.

G

gap: Fixed space between flex or grid items, never before the first or after the last. `gap: 8px 16px` sets row gap then column gap.
Grid container / item: An element with `display: grid` lays out its direct children in rows and columns at once; those children are grid items.
Grid line: A numbered line between grid tracks, starting at 1. Negative numbers count from the end, so `-1` is the last line.
grid-column, grid-row: Place an item between grid lines (`1 / -1` for full width) or across several tracks (`span 2`).
grid-template-areas, grid-area: `grid-template-areas` draws a layout as strings of names, one per row; `grid-area` puts an item in a named area. A `.` leaves a cell empty and areas must be rectangles.
grid-template-columns, grid-template-rows: Properties that list the sizes of a grid's columns or rows, one size per track.

H

High-density screen: A screen with two or more device pixels per CSS pixel, which needs larger image files to look sharp.
Hover and pointer media features: Media features beyond width: `(hover: hover)` is true when the pointer can hover (a mouse, not a finger), `(pointer: coarse)` means an imprecise pointer like a finger, and `print` applies when printing.

I

Implicit track: A grid row or column the grid creates itself because an item needs it, such as a fourth column when a banner spans 4.
Inherited: Passed from parent to children. Properties like `color`, `font-family` and custom properties are inherited.
Inline box: A box that flows along a line of text and is only as wide as its content, like `<a>`, `<strong>` and `<span>`. It ignores `width` and `height` unless it is a replaced element.
inline-block: A display value where the box flows in a line like inline but accepts width, height, padding and margins like a block. Also needed for `transform` to work on a span or link.

J

justify-content: Shares out spare space along the main axis. `space-between` puts the first item at the start, the last at the end and equal space between.

L

light-dark(): A function taking a light color and a dark color and picking one based on the page's `color-scheme`. It always gives the light color unless `color-scheme` is set.
line-height: The space between lines of text, usually a multiple of the font size: `line-height: 1.6` means 1.6 times the font size.
loading="lazy": An image attribute that delays downloading until the visitor scrolls near it.
Logical properties: Properties like `margin-inline` and `padding-block` that follow text direction, so they mean left/right or top/bottom in English but adapt for right-to-left languages.

M

Main axis: The direction flex items flow: a row by default, or a column with `flex-direction: column`.
Margin auto: An automatic margin soaks up spare space. On a block it centers it horizontally; on a flex item it pushes the item away, like Kettle & Crane's cart link.
Margin collapsing: When vertical margins of adjacent blocks touch, they merge and the larger wins instead of adding. It doesn't happen in flex or grid layouts.
max-width / min-width: Upper and lower limits on width. With `max-width` a box is that wide on big screens and shrinks on small ones.
min(): A function returning the smallest of its values. `min(100%, 14rem)` lets a grid column shrink on a tiny phone instead of overflowing.
minmax(): A grid track size with a lower and an upper limit, like `minmax(180px, 1fr)`.
Mobile first: Writing the phone layout as the normal CSS, then adding `width >=` queries as space grows. It usually needs the least code.

N

Nesting: Writing rules inside other rules, with `&` for the outer selector, so everything about a component sits together.
Normal flow: How the browser places boxes when no layout CSS is set: blocks stack top to bottom and inline boxes flow along lines.

O

object-fit: How an image fills a box of a different shape: `fill` stretches, `cover` crops to fill, `contain` fits inside with empty bands.
object-position: Chooses which part of an image stays visible when `object-fit` crops it.
Offset / inset: `top`, `right`, `bottom` and `left` say how far a positioned element's edges are from its reference box; `inset` sets all four at once.
opacity: How see-through a box is, from 0 (invisible) to 1 (solid). Values below 1 also create a stacking context.
order: Moves a flex item along the main axis without changing the HTML; lower numbers go first. Use sparingly because keyboard and screen reader users follow HTML order.
Outline: A line around a box that takes up no space, so it can show boxes without moving them.
outline-offset: Moves an outline away from the edge of its box so it stays visible against the box's own color.
Overflow: Content too big for its box, spilling out. The `overflow` property sets `visible`, `hidden` (cut off) or `auto` (scroll bar when needed).
overflow-wrap: anywhere: Lets the browser break a long unbreakable word, like an email address, so it fits a narrow column.

P

position: Sets how a box is placed: `static` (normal flow), `relative` (nudged, keeps its space), `absolute` (placed against its containing block, out of flow), `fixed` or `sticky`.
Positioned element: An element whose `position` is anything but `static`; it accepts offsets and can act as a containing block.
prefers-color-scheme: A media feature reporting whether the visitor chose a light or dark appearance.
prefers-reduced-motion: A media feature that reports whether the visitor asked their system for less motion, such as people with vestibular disorders.
Pseudo-class: A selector matching an element in a certain state or position, like `:hover` (pointer over it) or `:root`.

R

Range syntax: Writing media queries with comparisons like `(width >= 48rem)`, instead of the older `min-width`/`max-width`.
rem: A unit that is a multiple of the root font size, 16px by default, so `2rem` is 32px. It respects a visitor's chosen text size.
repeat(): A function that repeats grid track sizes: `repeat(3, 1fr)` is `1fr 1fr 1fr`.
Replaced element: An element the browser draws from a file, such as `<img>`. Unlike other inline boxes it respects `width` and `height`.
Reset: A few rules at the top of a stylesheet that remove unwanted browser defaults, such as heading margins, so every page starts from the same place.
Responsive: A single page that works well at every screen width, rather than a separate mobile site.
rgb(): A color written as red, green and blue amounts from 0 to 255, with an optional opacity after a slash, so `rgb(0 0 0 / 0.15)` is black at 15%.

S

Scoping: Setting a variable again on an element so the new value applies only inside it, like a redder `--accent` in a sale card.
Selector: The part of a CSS rule that says which elements it applies to, such as `p`, `.card` (class), `#cart` (id) or `nav a`.
Specificity: How strongly a selector competes in the cascade: an id beats a class, and a class beats an element name.
srcset, sizes, <picture>: `srcset` lists image files by width and `sizes` tells the browser how wide the image will display so it can pick one; `<picture>` with `<source>` swaps in a different image per condition.
Stacking context: A group of boxes layered together and placed as one layer, so a child's `z-index` can't rise above its context. Positioned elements with `z-index`, opacity below 1 and `transform` create one.
sticky: A `position` value that acts normally until scrolling reaches its offset, then sticks while its parent is on screen. It still takes up its space.
subgrid: Lets a nested grid use its parent's tracks, so items like card prices line up across cards.

T

Timing function: Sets the pace of a transition. `ease-out` starts fast and slows to a stop, good for responses to the user.
Track: One row or one column of a grid.
transform: Moves, scales or rotates a box after layout without moving other boxes. It can be animated smoothly, but doesn't work on inline boxes.
Transition: A gradual change from one value to another over a set time, such as a button darkening on hover. Put it on the normal rule so it works both ways.
Type scale: A small set of font sizes, each a step bigger than the last, such as `--step-1` and `--step-2`.

U

Universal selector: `*`, a selector that matches every element.
Utility class: A single-purpose class such as `.text-center` that does one job and is meant to win over other rules, so it goes last in the stylesheet or in the latest layer.

V

var(): The function that reads a custom property, optionally with a fallback: `var(--muted, #666)`.
Viewport: The visible area of the page, which is what a `fixed` box is positioned against.
Viewport meta tag: The `<meta name="viewport" content="width=device-width, initial-scale=1">` line in `<head>`. It makes phones lay the page out at their real width instead of about 980px, so media queries see the true width.
Viewport units: Units that are percentages of the window size: `vw` is 1% of its width and `vh` 1% of its height. `dvh` is 1% of the currently visible height, which changes as a phone's address bar slides, with `svh` and `lvh` the smallest and largest.
VS Code / Live Preview: VS Code is a free code editor from Microsoft. Its Live Preview extension shows an HTML page beside the code and refreshes it each time you save.

W

WCAG (Web Content Accessibility Guidelines): The accessibility guidelines most laws refer to; they ask for at least 4.5:1 contrast for normal text and 3:1 for large text.
white-space: nowrap: A CSS declaration that keeps text on a single line instead of wrapping it. It is used, for example, so each link in a horizontally scrolling nav stays on one line.

Z

z-index: Controls which overlapping box sits on top; higher numbers are in front. It works only on positioned elements and flex or grid items.