CSS Super Demo
Cascade ▶ Layers ▶ Specificity ▶ Inheritance

CSS Super Demo

Open DevTools and play! Inline styles, IDs, classes, :is/:where, and @layer ordering all appear here to demonstrate the cascade.

Selectors & Specificity pseudo‑classes, pseudo‑elements, attribute, :has(), :is(), :where()

Specificity showdown

This box has style="border:3px solid orange" (inline > id > class). Click the buttons to toggle class & ID.

Attribute selector [data-role="admin"] outlines this element.

Form pseudos & parent :has()

Generated content & counters

  1. ::before/::after add labels and decorations.
  2. ::selection highlights selected text.
  3. ::marker styles list bullets (see checkmarks below).

Box Model, Outline vs Border, Units & Typography

Content box with margin, border, padding, outline, and box-shadow.
content-box
border-box (preferred)

Common units: px, em, rem, %, vw/vh, vmin/vmax, ch, ex. Functions: calc, min/max/clamp.

80px 8em 8rem 15vw 20ch clamp(180px, 40vw, 360px)

Backgrounds, Gradients, Blends, Filters, Masks & Text Clip

Linear gradient background
Multiple backgrounds
Conic gradient, animated via @property

Background-clip: text — gradient-filled text

Masking with mask-image: radial-gradient(...)
Blend modes with mix-blend-mode
Placeholder
Filter demo: grayscale & contrast removed on hover
@supports(backdrop-filter) applies frosted glass.

Layout: Flexbox, Grid, Positioning, Multicolumn, Float & Shapes

Flexbox

1
2
3
4
5

Grid

A
B
C
D
E

Grid Template Areas

Header
Main
Footer

Positioning

I am sticky

Scroll the page; this sticky element sticks to the top (inside this box's scrollport).

Absolutely positioned

Float + shape-outside

Text wraps around a circular float because of shape-outside: circle(). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, saepe! Voluptate, porro excepturi! Dignissimos in expedita minima veritatis, dolore eveniet nemo commodi. Repellat, facere aspernatur nobis adipisci commodi amet eaque?

Multi-column layout

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, molestiae? Omnis, tempora impedit. Aspernatur, suscipit, totam. Eius dicta amet error voluptatibus minima reprehenderit placeat consectetur odit recusandae nulla, ea commodi.

Soluta pariatur, nesciunt laboriosam, totam cupiditate quasi asperiores porro ducimus tenetur. Ut fuga est voluptates consequuntur illo ab saepe ad, impedit veritatis non aut ex tempora dicta nisi, ipsam quo.

Odio sed et obcaecati voluptates numquam, a voluptas repellat dicta voluptatem blanditiis, similique id libero nam architecto at. Iste repellendus molestiae minus eius, ipsum dignissimos cum ipsam numquam, consequuntur voluptates!

Forms, Inputs, Validation, accent-color, and Resizable

Choices

Transforms, Transitions, 3D & Animations (with reduced-motion respect)

Hover me (3D)
Hover me (transition)

Scroll snap, anchor target, and stacking context

Card 1

Scroll horizontally (touchpad/touch) to snap.

Card 2

Each card uses scroll-snap-align.

Card 3

Try jumping to #card2.

Card 4

Smooth scrolling is enabled on html.

Stacking & z-index

z:1
z:2
z:3

Tables, Lists & Counters

NameQtyPrice
Alpha2$9
Beta5$4
Gamma1$15

Ordered steps (custom counter)

  1. Initialize
  2. Process
  3. Complete

Media Queries & Container Queries

Resize viewport to see @media change the grid.
prefers-color-scheme & prefers-reduced-motion are used globally.
Try printing this page to view @media print.

Resizable container (Container Query)

Card
Card
Card
Card
Card

Logical Properties & Writing Modes

This box uses padding-inline / padding-block and margin-block logical properties.

Vertical writing mode (vertical-rl)