CSS Fundamentals

The Box Model & Display

/* Box model: content + padding + border + margin */
* { box-sizing: border-box; }  /* ALWAYS — include padding/border in width */

/* Content box (default): width = content only */
/* Border box: width = content + padding + border */

.element {
  width: 300px;     /* content width (border-box: total width) */
  height: 200px;
  padding: 16px 24px;           /* top/bottom left/right */
  margin: 0 auto;               /* center horizontally */
  border: 1px solid #e2e8f0;
  outline: 2px solid blue;      /* doesn't affect layout */
}

/* Display */
display: block;        /* takes full width, new line */
display: inline;       /* flows with text, no width/height */
display: inline-block; /* inline flow, but width/height work */
display: none;         /* removed from layout */
display: flex;
display: grid;
display: contents;     /* box itself disappears, children remain */

/* Visibility vs display */
visibility: hidden;    /* invisible but still occupies space */
opacity: 0;            /* invisible but still occupies space and receives events */
display: none;         /* removed from layout, no space */

Positioning

/* Static — default, follows normal flow */
position: static;

/* Relative — offset from normal position, still in flow */
position: relative;
top: 10px; left: 20px;

/* Absolute — removed from flow, positioned relative to nearest positioned ancestor */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;  /* fill parent */
inset: 0;  /* shorthand for all four sides */

/* Fixed — relative to viewport, stays on scroll */
position: fixed;
top: 0; left: 0; right: 0;  /* fixed header */
bottom: 1rem; right: 1rem;  /* floating action button */

/* Sticky — relative until scroll threshold, then fixed */
position: sticky;
top: 0; z-index: 10;  /* sticky nav */

/* z-index (only works on positioned elements) */
z-index: 1;           /* stacking context */
z-index: 9999;        /* modal / overlay */
z-index: -1;          /* behind content */

Flexbox

/* Container */
.flex {
  display: flex;
  flex-direction: row | column | row-reverse | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
  justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
  align-items: stretch | center | flex-start | flex-end | baseline;
  align-content: stretch | center | flex-start | flex-end | space-between;  /* multiline */
  gap: 1rem;                /* row and column gap */
  gap: 1rem 2rem;           /* row-gap column-gap */
}

/* Items */
.item {
  flex: 1;                  /* flex: grow shrink basis */
  flex: 1 1 0%;             /* same as flex: 1 */
  flex: 0 0 200px;          /* fixed 200px, no grow/shrink */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 300px;
  align-self: center;       /* override container's align-items */
  order: -1;                /* reorder visually */
}

/* Center anything */
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Grid

/* Container */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);           /* 3 equal columns */
  grid-template-columns: 200px 1fr 2fr;            /* mixed */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* responsive */
  grid-template-rows: auto 1fr auto;               /* header/main/footer */
  gap: 1.5rem;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

/* Items */
.item {
  grid-column: 1 / 3;       /* from line 1 to line 3 (span 2) */
  grid-column: span 2;      /* span 2 columns */
  grid-column: 1 / -1;      /* from first to last line (full width) */
  grid-row: 2 / 4;
  grid-area: header;        /* assign to named area */
  align-self: center;
  justify-self: end;
}

/* fr unit — fraction of free space after fixed sizes */
/* auto — fits content */
/* minmax(min, max) — responsive column/row size */

CSS Custom Properties & Modern Features

/* CSS Custom Properties (variables) */
:root {
  --color-primary: #3b82f6;
  --color-bg: #ffffff;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --font-size-base: 16px;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.1);
}

.button {
  background: var(--color-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow);
}

/* Dark mode with custom properties */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0f172a;
    --color-text: #f1f5f9;
  }
}

/* Clamp — responsive font without media queries */
font-size: clamp(1rem, 2.5vw, 2rem);   /* min, preferred, max */

/* Container queries (modern) */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

/* Logical properties (RTL-aware) */
padding-inline: 1rem;       /* padding-left + padding-right */
padding-block: 0.5rem;      /* padding-top + padding-bottom */
margin-inline-start: auto;  /* margin-left in LTR */

/* :is() :where() :has() */
:is(h1, h2, h3) { line-height: 1.2; }
article:has(> img) { padding-top: 0; }
.nav-item:has(.active) > a { font-weight: bold; }