CSS Reference Card

Anatomy of a rule

01

Read it left to right: what to style, which aspect of it, how.

.card {
  background-color: white;
  font-size: 18px;
}

02

Goes in <head> so it loads before the page is drawn.

<link rel="stylesheet"
  href="style.css">

03

Class selectors can be reused on many elements; an id is unique to one.

p { }          /* element */
.warning { }   /* class */
#header { }    /* id */
div p { }     /* p inside div */

04

Text color and background color are two different properties.

h1 {
  color: #4e89bd;
  font-family: sans-serif;
  text-align: center;
}

05

Styles that apply during an interaction. Many touch and keyboard users never trigger :hover at all — keep a visible focus state.

button:hover {
  background-color: #61afee;
}
button:focus-visible {
  outline: 2px solid;
}
button:active {
  transform: scale(0.98);
}

06

Every element is a box: content, then padding, border, margin outward.

margin

border

padding

content

07

Turns a container into a row (or column) layout for its children.

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

08

If a rule doesn't apply, check in order: which elements should share it, is the selector actually matching them, is the value valid.
Some properties inherit from parent to child automatically (color, font-family); others (border, margin) don't.
Every declaration ends with a semicolon — a missing one can break the rule after it.
Property names use hyphens: background-color, never camelCase.

Missing semicoloncolor: red without ; can swallow the next line.

Wrong selector.Card won't match class="card" — CSS is case-sensitive.

No unitsfont-size: 18 is invalid — needs 18px.