CSS

Specificity is a three-part count: ID selectors, then class, attribute and pseudo-class selectors, then type selectors and pseudo-elements. Browsers compare the three columns left to right, and the first column that differs decides; identical values fall back to source order.

Text-related properties inherit by default: color, the font properties, line-height, letter-spacing, text-align, white-space, list-style, visibility and cursor. Box and painting properties do not: margin, padding, border, background, width, height, display, position, overflow.

@layer groups CSS rules into named layers that the cascade compares before it looks at specificity. A declaration in a later-declared layer beats one in an earlier layer, even when the earlier selector is far more specific.

A ::before box exists only if the content property generates it — content's initial value computes to none on ::before and ::after, so without it no box is created at all. content: "" generates a real but empty inline box you can then style.

Written together, .card.featured matches one element carrying both classes. With a space, .card .featured matches a .featured element inside a .card. With a comma, .card, .featured is a selector list: two independent selectors sharing one declaration block.

Under the default box-sizing: content-box, width sizes only the content box, so 100px width plus 20px padding on each side plus 2px borders renders 144px wide. With box-sizing: border-box the box stays 100px and the content area shrinks to 56px.

A block box takes a whole line and honours width, height and all four margins. A non-replaced inline box flows inside a line of text and ignores width, height and vertical margins. inline-block flows inline but sizes like a block.

An img is a replaced element carrying an intrinsic width, height and ratio from the image file, so height: auto resolves through that ratio. The rendered height scales proportionally with whatever width you set.

The gap is 30px. Adjoining vertical margins of block boxes in normal flow collapse into one margin equal to the larger value instead of adding up, so the 20px margin contributes nothing extra.

overflow: scroll always provides a scrolling mechanism whether or not content overflows; overflow: auto provides one only when it does. Both make the element a scroll container, and so does overflow: hidden, which clips and stays scrollable programmatically but shows no scrollbars.

align-items is declared on the flex container and sets the cross-axis alignment for every item; align-self is declared on one item and overrides it for that item only. With neither set, items use the initial value normal, which behaves as stretch.

Container properties set up the layout itself: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content and gap. Item properties describe one box's own participation: order, flex-grow, flex-shrink, flex-basis, the flex shorthand and align-self. Declared on the wrong box, they are silently ignored.

Both lay the children out identically as flex items. The difference is the container's own box: display: flex is block-level, so it takes its own line and fills the available width, while display: inline-flex is inline-level and sits inside surrounding text.

Set display: flex, justify-content: center and align-items: center on the parent, and give that parent a height, such as min-height: 100vh. Without a height the parent shrink-wraps its child, so there is no vertical free space to center in.

flex: 1 expands to flex: 1 1 0%, flex: auto to 1 1 auto, flex: none to 0 0 auto, and flex: initial to 0 1 auto. The three parts, in order, are flex-grow, flex-shrink, and flex-basis.

place-items: center centers every grid item in both axes of its cell. It is the shorthand for align-items (block axis) then justify-items (inline axis), so it expands to align-items: center; justify-items: center.

CSS Grid auto-places any item you do not position: it walks the items in document order and drops each one into the next empty cell, one item per cell, filling row by row because grid-auto-flow defaults to row.

The explicit grid is the tracks you declare yourself with grid-template-columns, grid-template-rows or grid-template-areas. The implicit grid is the extra rows or columns the browser generates on its own when items need space outside what you declared.

They are grid line numbers, not column numbers. The item starts at column line 1 and ends at column line 3, so it covers the two tracks between them — the first and second columns.

minmax(200px, 1fr) gives a grid column a 200px floor and a flexible ceiling: the track is never narrower than 200px, but it grows beyond that to absorb its share of the container's leftover free space.

Set container-type: inline-size and container-name: card on the wrapper, or the shorthand container: card / inline-size, then put the rules inside @container card (min-width: 400px). Those rules style the container's descendants, not the container itself.

clamp(MIN, PREFERRED, MAX) returns the preferred value when it lies between the bounds, MIN when it falls below, and MAX when it rises above. font-size: clamp(1.5rem, 4vw, 3rem) scales a heading with the viewport but never below 1.5rem or above 3rem.

Mobile-first means the unconditional base rules describe the narrowest layout, and min-width media queries add complexity as the viewport grows. Because narrow screens are the default, the stylesheet accumulates enhancements instead of overrides.

It tells a mobile browser to make the layout viewport the device's own width at 100% zoom, instead of a wide fallback of roughly 980 CSS pixels. Without it, a phone lays the page out wide and shrinks the whole thing down.

@media queries only test the viewport, so one card gets the same breakpoint in a wide main column and in a narrow sidebar. Container queries let a component respond to the size of its own container instead.

Declare a custom property as a normal declaration whose name starts with two dashes, such as --gap: 12px, and read it back with var(--gap). The optional second argument, var(--gap, 8px), applies only when --gap is not defined.

A CSS transition interpolates between two states and only runs when a value actually changes, typically on :hover or a class toggle. A @keyframes animation declares many intermediate stops, starts on its own, and can loop, alternate direction, and be paused.

It animates only opacity over 300ms with an ease-in curve, starting after a 100ms delay. In the transition shorthand the components are order-free by type, except that the first time value is always the duration and the second is the delay.

CSS custom properties are real values in the cascade: they inherit, can be redefined per selector or per element, and the browser resolves them at computed-value time. Sass variables are compile-time text that never reaches the browser.

animation-fill-mode decides whether keyframe values apply outside the animation's active run. The default none applies nothing before or after; forwards holds the final keyframe after it ends; backwards applies the first keyframe during the delay; both does each.

A relatively positioned box keeps its space in normal flow and is only shifted visually from where it would have been. An absolutely positioned box is removed from flow entirely and offset from its containing block instead.

position: sticky keeps the element in normal flow and pins it only after scrolling reaches the inset threshold you declared, inside its nearest scrolling ancestor. position: fixed removes the element from flow and pins it to the viewport from the start.

z-index applies to positioned elements — those with position relative, absolute, fixed, or sticky — and also to flex items and grid items, which honour z-index even while position stays static. On any other element the declaration is ignored.

A block container with auto height measures only its in-flow children, and floats are out of flow, so it collapses. Make it contain floats by giving it display: flow-root, or add a cleared element after the floats.

An element with clipped overflow clips only descendants whose containing block is that element or something inside it. A positioned panel whose containing block is higher up escapes the clip — which is why position: fixed, or mounting the panel at the document root, fixes it.

BEM names classes after a block (a standalone component, .card), its elements (parts that exist only inside it, .card__title), and modifiers (variant flags, .card--featured). Two underscores mark an element, two hyphens mark a modifier.

CSS selectors are matched against the entire document regardless of which file they were written in, so one .title rule styles every element with that class. Collisions are silent, and unrelated components end up restyling each other.

A single class keeps every rule at the same low weight, so a later rule can override it by source order alone. IDs and long descendant chains raise the weight, forcing every future override to be heavier still.

Utility-first composes many single-purpose classes in the markup, each setting one or two declarations. The semantic approach puts one meaning-based class on the element and defines all its styling in the stylesheet. The trade is markup noise versus an ever-growing stylesheet.

Global CSS holds what must exist exactly once for the whole document: the reset, @font-face declarations, custom-property definitions on :root, base element typography, and a small utility set. Anything describing one component belongs in that component's file.