It describes the image for screen readers and shows if the image fails to load. Use alt="" for purely decorative images.

An id must be unique on the page ( #id in CSS). A class can be reused on many elements, and an element can have several ( .class in CSS).

Content → padding → border → margin

Makes width and height include padding and border, so adding padding does not make the element bigger.

Inline styles → ID selectors → classes, attributes and pseudo-classes → element types and pseudo-elements. !important overrides all of these.

(1,1,1)

The one that appears later in the stylesheet (the cascade).

static (default), relative (offset from its normal spot), absolute (relative to the nearest positioned ancestor), fixed (relative to the viewport), sticky (relative until a scroll threshold, then sticks).

Its nearest ancestor whose position is not static. If there is none, the initial containing block (the page).

display: none removes the element from the layout entirely. visibility: hidden hides it but it still takes up space.

justify-content : alignment along the main axis (the flex-direction). align-items : alignment along the cross axis.

.parent { display: flex; justify-content: center; align-items: center; }

Three equal-width columns with 16px gaps between rows and columns.

Flexbox for one-dimensional layouts (a row or a column, like a nav bar). Grid for two-dimensional layouts (rows and columns together, like a page or card gallery).

px : fixed. em : relative to the element's own font size (compounds when nested). rem : relative to the root font size. % : relative to the parent.

@media (min-width: 768px) { .sidebar { display: block; } }

Pseudo-class (one colon) selects an element in a state: :hover , :focus , :nth-child(2) . Pseudo-element (two colons) styles part of an element: ::before , ::after , ::first-line .

Vertical margins of adjacent block elements combine into one margin equal to the larger of the two, instead of adding up. Horizontal margins never collapse.

It only applies to positioned elements (and flex or grid items), and it only competes within the same stacking context.

Tells mobile browsers to use the device width instead of a zoomed-out desktop width, so responsive CSS works.

Clicking the label focuses the input, and screen readers announce the label. Link them with and , or wrap the input inside the label.