WebDev Story CSS Features

9.0 CSS Custom Properties (Variables)

CSS custom properties (also called CSS variables) store reusable values in named slots. They cascade and inherit like regular CSS properties, making them far more flexible than preprocessor variables. Custom properties are defined with a --name prefix and read with var().

/* ── Define at root scope (globally available) ── */
:root {
  --color-primary: steelblue;
  --spacing-base:  1rem;
  --font-body:     system-ui, sans-serif;
}

/* ── Use anywhere ── */
body {
  font-family: var(--font-body);
  padding: var(--spacing-base);
}

button {
  background: var(--color-primary);
  padding: calc(var(--spacing-base) * 0.5) var(--spacing-base);
}

/* ── Fallback value ── */
color: var(--accent, #333);    /* uses #333 if --accent is not set */

/* ── Override in a scope ── */
.dark-theme {
  --color-primary: #1a8cff;
}

/* ── Read and set from JavaScript ── */
/* const root = document.documentElement;
   root.style.setProperty('--color-primary', '#e07b39');
   root.style.getPropertyValue('--color-primary');           */

Custom properties are commonly used for theming (light/dark mode), design tokens (colors, spacing, type scales), and component-level overrides.

9.1 Transitions & Animations

CSS transitions smoothly interpolate a property change triggered by a state change (e.g., :hover). CSS animations play sequences of style changes defined with @keyframes, independently of user interaction.

/* ── Transitions ─────────────────────────────────────────────── */
/* Syntax: transition: property duration timing-function delay   */
.btn {
  background: steelblue;
  transition: background 200ms ease, transform 150ms ease-out;
}
.btn:hover {
  background: #1a6fa3;
  transform: scale(1.04);
}

/* Common timing functions: ease, linear, ease-in, ease-out,
   ease-in-out, steps(n), cubic-bezier(x1,y1,x2,y2)           */

/* ── @keyframes animations ──────────────────────────────────── */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Syntax: animation: name duration timing-fn delay
           iteration-count direction fill-mode play-state     */
.banner {
  animation: slide-in 400ms ease-out both;
}

/* ── Multi-step keyframes ── */
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.badge {
  animation: pulse 1.2s ease-in-out infinite;
}

/* ── Pause/resume with JavaScript ── */
/* el.style.animationPlayState = 'paused';  */

Table 1. — Transition & Animation Properties

Property	Description / Values
Transition
`transition-property`	Which property to animate. `all`, or a specific property name.
`transition-duration`	How long the transition takes. `200ms`, `0.4s`.
`transition-timing-function`	`ease`, `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier()`, `steps()`.
`transition-delay`	Delay before transition starts. `100ms`.
`transition`	Shorthand: `<property> <duration> <timing> <delay>`. Multiple transitions comma-separated.
Animation
`animation-name`	Name of the `@keyframes` rule.
`animation-duration`	Time for one cycle. `400ms`, `1.2s`.
`animation-timing-function`	Same values as `transition-timing-function`.
`animation-delay`	Delay before first play.
`animation-iteration-count`	Number of repetitions. `1`, `infinite`.
`animation-direction`	`normal`, `reverse`, `alternate`, `alternate-reverse`.
`animation-fill-mode`	Styles before/after play: `none`, `forwards`, `backwards`, `both`.
`animation-play-state`	`running`, `paused`. Can be set via JS.
`animation`	Shorthand for all animation sub-properties.

9.2 Media Queries

Media queries allow CSS to apply different rules based on the device's characteristics — viewport width, resolution, orientation, or color scheme preference. They are the foundation of responsive design.

/* ── Width breakpoints ────────────────────────────────────────── */
/* Mobile-first: add complexity as viewport grows                 */
.container { padding: 1rem; }

@media (min-width: 48rem) {          /* ≥ 768 px — tablet        */
  .container { padding: 2rem; }
}

@media (min-width: 75rem) {          /* ≥ 1200 px — desktop      */
  .container { max-width: 70rem; margin: 0 auto; }
}

/* ── Dark mode preference ─────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root { --bg: #1e1e1e; --fg: #e8e8e8; }
  body  { background: var(--bg); color: var(--fg); }
}

/* ── Print styles ─────────────────────────────────────────────── */
@media print {
  nav, footer, .no-print { display: none; }
  body { font-size: 11pt; }
}

/* ── Orientation ─────────────────────────────────────────────── */
@media (orientation: landscape) {
  .sidebar { width: 20rem; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Common breakpoints (rem-based, at font-size: 16px):

30rem (480 px) — small phones
48rem (768 px) — tablets / landscape phones
64rem (1024 px) — small desktops / large tablets
75rem (1200 px) — standard desktop
90rem (1440 px) — wide desktop

9.3 Fonts

Most system fonts are platform-specific and not consistently available across Windows, macOS, and Linux. For cross-platform consistency, use a web font service such as Google Fonts, or specify a generic family fallback stack.

/* ── Web font from Google Fonts ─────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body { font-family: 'Inter', system-ui, sans-serif; }

/* ── Self-hosted @font-face ──────────────────────────────────── */
@font-face {
  font-family: 'MyFont';
  src: url('./fonts/myfont.woff2') format('woff2');
  font-weight: 400;
  font-style:  normal;
  font-display: swap;        /* show fallback while font loads    */
}

/* ── Robust cross-platform stack ──────────────────────────────── */
body {
  font-family:
    system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
}

code {
  font-family: ui-monospace, 'Cascadia Code', 'Fira Code',
               Consolas, 'Courier New', monospace;
}

Table 2. — Generic Font Families

Generic Family	Description / Typical Uses
`system-ui`	The OS default UI font. Segoe UI (Windows), San Francisco (macOS/iOS), Roboto (Android).
`ui-sans-serif`	Platform's preferred sans-serif UI font.
`ui-serif`	Platform's preferred serif UI font.
`ui-monospace`	Platform's preferred monospace font. Good for code.
`sans-serif`	Generic sans-serif fallback. Arial, Helvetica, Roboto.
`serif`	Generic serif fallback. Times New Roman, Georgia.
`monospace`	Generic monospace fallback. Courier New, Consolas.
`cursive`	Informal script-like fonts. Inconsistent across platforms.
`fantasy`	Decorative display fonts. Inconsistent across platforms.

Table 3. — Popular Google Fonts

Font	Style	Notes
Sans-serif
Inter	Sans-serif	Highly legible; popular for UIs and dashboards.
Roboto	Sans-serif	Android default; clean and neutral.
Open Sans	Sans-serif	Friendly and readable; widely used for body text.
Lato	Sans-serif	Warm tone; good for marketing copy.
Montserrat	Sans-serif	Geometric; strong for headings.
Poppins	Sans-serif	Rounded geometric; modern feel.
Nunito	Sans-serif	Rounded and friendly; good for apps.
Serif
Merriweather	Serif	Designed for on-screen reading; strong serifs.
Playfair Display	Serif	Elegant; suited for editorial headings.
Source Serif Pro	Serif	Adobe's readable web serif; good for long text.
Bitter	Serif	Designed specifically for e-readers; high legibility.
Monospace
Fira Code	Monospace	Programming ligatures; popular for code editors.
JetBrains Mono	Monospace	Tall x-height; minimal eye strain for long coding sessions.
Source Code Pro	Monospace	Adobe's clean coding font; no ligatures.

9.4 CSS Libraries & Frameworks

CSS libraries range from utility-class systems (Tailwind) and component frameworks (Bootstrap) to classless themes (Pico.css) and resets (Normalize). Choose based on how much structure you want the library to impose.

Table 4. — CSS Libraries & Frameworks

Library	CSS only?	Notes
General frameworks
Bootstrap	No	Most widely used framework; interactive components require JS.
Tailwind CSS	Yes	Utility-first; compose styles with small classes; build-step recommended.
Bulma	Yes	Flexbox-first; clean components; no JS required.
Pure.css	Yes	Very lightweight modular CSS; no JS.
Milligram	Yes	Minimal stylesheet; good starting point.
Classless / semantic-first
Pico.css	Yes	Styles semantic HTML directly; no classes needed; auto dark/light.
Water.css	Yes	Drop-in classless theme with automatic dark/light mode.
MVP.css	Yes	Zero classes; sensible defaults for semantic HTML.
Resets & normalizers
Normalize.css	Yes	Standardizes cross-browser default styles without a hard reset.
modern-normalize	Yes	Slimmer, more modern variant of normalize.
The New CSS Reset	Yes	Aggressive reset — removes all browser defaults so you start fresh.
Animation & effects
Animate.css	Yes	Ready-made keyframe animations via CSS classes.
Hover.css	Yes	Hover transition effects; CSS only.
Layout & grids
Flexbox Grid	Yes	Responsive 12-column grid built on Flexbox.
Utilities
Open Props	Yes	Library of CSS custom properties (colors, easings, sizes).
Typography
Tufte CSS	Yes	Beautiful long-form essay styling inspired by Edward Tufte.
Icons
Font Awesome	Yes*	Icon font + SVG; JS optional for advanced features.
Material Icons	Yes	Google's icon font; no JS required.
Bootstrap Icons	Yes	SVG/CSS icons; no JS required.

9.5 CSS Module Specifications

CSS is not a monolithic specification — it is divided into modules, each with its own version and standardization status. The table below lists the major modules with links to both MDN and the W3C specification.

Table 5. — CSS Module Specifications

Module (MDN / W3C)	Purpose	Status
Selectors (MDN) Selectors (W3C)	Target elements by type, class, ID, attribute, pseudo-class, pseudo-element.	Level 3: REC Level 4: Working Draft
Cascade & Inheritance (MDN) Cascade & Inheritance (W3C)	Resolve style conflicts via specificity, importance, source order; property inheritance rules.	Level 3: REC Level 4: Working Draft
Box Model (MDN) Box Model (W3C)	Content, padding, border, margin model; display types (block, inline, inline-block).	REC (CSS 2.1) Updates ongoing
Backgrounds & Borders (MDN) Backgrounds & Borders (W3C)	Background images, gradients, multiple backgrounds, borders, border-radius.	Level 3: REC Level 4: Working Draft
Color (MDN) Color (W3C)	Color values and spaces: named colors, RGB, HSL, HWB, Lab, LCH, alpha, color-mix().	Level 3: REC Level 4: Working Draft
Values & Units (MDN) Values & Units (W3C)	Core units: px, em, rem, %, vh/vw, fr; math functions: calc(), min(), max(), clamp().	Level 3: REC Level 4: Working Draft
Media Queries (MDN) Media Queries (W3C)	Adapt styles to viewport width, resolution, orientation, color scheme preference.	Level 3: REC Level 4: Candidate Rec
Flexbox (MDN) Flexbox (W3C)	One-dimensional layout model for distributing space and aligning items in a row or column.	Level 1: REC
Grid Layout (MDN) Grid Layout (W3C)	Two-dimensional layout model with explicit rows and columns and named areas.	Level 1: REC Level 2: Working Draft
Transforms & Animations (MDN) Transforms (W3C)	2D/3D transforms (rotate, scale, translate), CSS transitions, and keyframe animations.	Level 1: REC Level 2: Working Draft
Fonts & Text (MDN) Fonts (W3C)	Web fonts (@font-face), font-variant, OpenType features, text decoration, line breaking.	REC (various levels) Updates in draft
Scroll & Overflow (MDN) Scroll & Overflow (W3C)	Overflow behavior, scrollbars, scroll snapping, overscroll handling.	Level 3: REC Level 4: Working Draft