Variables, Media Queries & Columns

CSS variables store values you reuse — colors, spacing, fonts. Define them with --name on :root, use them with var(--name).

CSS Variables (Custom Properties)

CSS variables store values you reuse — colors, spacing, fonts. Define them with --name on :root, use them with var(--name).

Real-life example: Variables are like labeled jars in the kitchen — --salt, --sugar — change the jar once, every recipe updates.

CSS variables

:root {
  --primary: #0891b2;
  --text: #0f172a;
  --radius: 12px;
  --space: 1rem;
}

.btn {
  background: var(--primary);
  color: white;
  border-radius: var(--radius);
  padding: var(--space) calc(var(--space) * 1.5);
}

@property (intro)

@property registers a custom property with a type and initial value. It helps animations on variables work more predictably in modern browsers.

Real-life example: @property is like telling the kitchen exactly what is inside each jar — number, color, or length — so machines can measure it safely.

Registered custom property

@property --progress {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.bar {
  width: var(--progress);
  height: 8px;
  background: #0891b2;
  transition: --progress 0.4s ease;
}

Media Queries

Media queries apply CSS only when a condition is true — usually screen width. This is the heart of responsive design.

Real-life example: Media queries are like different clothes for seasons — same person, different outfit when weather (screen size) changes.

Mobile-first media queries

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Responsive breakpoints

Multiple Columns

column-count and column-gap split text into newspaper-style columns — great for long articles on wide screens.

Real-life example: Multi-column text is like a Hindi newspaper — long story flows down column one, then continues in column two.

Column layout

.article-columns {
  column-count: 2;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
}

@media (max-width: 700px) {
  .article-columns {
    column-count: 1;
  }
}

User Interface (resize, outline, caret)

resize lets users drag to resize textareas. caret-color changes the blinking text cursor color. Always keep visible focus for keyboard users.

Real-life example: resize is like a stretchable rubber band on a box corner. caret-color is like choosing the color of the pen tip while typing.

Start with mobile styles first, then add min-width breakpoints — easier than fixing desktop-first layouts later.

UI properties

textarea {
  resize: vertical;
  min-height: 120px;
  caret-color: #0891b2;
}

input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0891b2;
  outline-offset: 2px;
}