CSS Story

CSS Story Prologue

starting, story content, references

0.0 Prologue

Cascading Style Sheets (CSS) is the language that controls the visual presentation of HTML. While HTML provides structure and semantic meaning, CSS defines colors, typography, spacing, and layout. Together they form the foundation of every web page. Mastering CSS means understanding selectors, the cascade, units, the box model, layout systems (flexbox and grid), and responsive techniques.
Why CSS?
  1. CSS separates content from presentation — a single stylesheet applies a consistent design across many pages without touching HTML markup.
  2. CSS is declarative: you describe the desired appearance; the browser handles rendering across devices and screen sizes.
  3. The cascade and specificity rules give precise control over which styles win when rules conflict, enabling large-scale theming and overrides.
  4. Flexbox and Grid provide powerful, responsive layout without floats or tables, handling both one-dimensional and two-dimensional designs cleanly.
  5. CSS custom properties (variables), media queries, and animations enable dynamic, accessible, and responsive designs using only CSS.
This story covers CSS from selectors and the cascade through layout, custom properties, transitions, media queries, fonts, and positioning. It focuses on CSS itself; JavaScript integration is addressed in the JS Story.

0.1 Getting Started

A text editor and a browser are all you need. Save a .css file, link it from an HTML page, and open the page in a browser. 
<!-- Link a stylesheet in the HTML head -->
<link rel="stylesheet" href="css/main.css">
Use browser DevTools (F12) to inspect computed styles, toggle declarations on and off, and experiment with values in the Styles panel in real time.

0.2 Story Content

Each chapter covers one area of CSS. Pages are accessible from the Pages list at the lower right. Chapters:

  1. Prologue

    Motivation, story layout, and getting started.

  2. CSS Summary

    What CSS is, selector syntax, cascade and specificity, and units of measure.

  3. Layout

    Flexbox, CSS Grid, and the classList API for toggling styles from JavaScript.

  4. Features

    Custom properties, transitions and animations, media queries, fonts, and libraries.

  5. Positioning

    Position values, offset properties, the containing block, z-index, and overflow.

  6. Style Management

    Specificity discipline, cascade layers, BEM naming, design tokens, and safe use of !important.

  7. Tutorials and References

    Curated tutorials and reference resources organized by Basic, Intermediate, and Advanced level.

0.3 References

Reference Description
MDN CSS Reference Comprehensive property-by-property reference with browser support tables.
CSS Specifications - W3C Index of all CSS module specifications.
web.dev: Learn CSS Modern, structured CSS course from the Chrome team.
cssreference.io Visual reference - each property shown with live rendering demos.
CSS-Tricks Guides In-depth guides on flexbox, grid, and many CSS techniques.