CSS Lab Examples

Twenty standalone demo pages that follow the track's lesson order, grouped by phase. Each demo is a complete, commented HTML file with embedded styles. Every row has two links: View code opens the source in the code viewer; Preview opens the rendered page in a new tab. Change one declaration in the source, then reload the preview — that loop is where the learning happens.

Foundations

The syntax, selectors, cascade, and values every later demo assumes.

#DescriptionView codePreview
1Rule anatomy — selectors, declarations, comments, a dropped typoViewPreview
2Selector lab — type, class, ID, compound, and attribute selectorsViewPreview
3Combinators — descendant, child, and sibling relationshipsViewPreview
4Cascade order — competing rules resolved step by stepViewPreview
5Specificity ladder — weights from :where() to inline styleViewPreview
6Custom properties — declaration, inheritance, and subtree overridesViewPreview
7Units and functions — rem, ch, calc, clamp, min, max at workViewPreview
8Color spaces — hex, rgb, hsl, oklch and color-mix side by sideViewPreview

Box and text

The box model and typography decisions that every interface inherits.

#DescriptionView codePreview
9Box model — content-box vs border-box rendered widthsViewPreview
10Margin collapse — sibling and parent-child collapsing, and the gap fixViewPreview
11Typographic scale — measure, leading, and hierarchyViewPreview
12Fluid type — clamp() with floors and ceilings, resized liveViewPreview

Layout

Flow, positioning, and the two layout systems.

#DescriptionView codePreview
13Flow and display — block, inline, inline-block behaviorViewPreview
14Positioning — static, relative, absolute, fixed, sticky panelsViewPreview
15Flexbox patterns — toolbar, media object, centering, equal cardsViewPreview
16Grid patterns — auto-fit card wall, template-area page shellViewPreview

Responsive and quality

Mobile-first layouts, motion with manners, and accessibility in practice.

#DescriptionView codePreview
17Mobile-first layout — base styles plus additive min-width queriesViewPreview
18Animations — transitions, keyframes, and prefers-reduced-motionViewPreview
19Accessible styling — focus, contrast, target size, screen-reader utilitiesViewPreview
20Print styles — a @media print stylesheet for articlesViewPreview
How to use them. The demos need nothing but a browser — each file is self-contained. In the code viewer, change one declaration and study what you would expect to change; in the preview, verify. Larger multi-file study projects are on the Study Projects page.