EmmEEdu
Cascading Style Sheets & Visual Geometry

CSS: The Visual Architecture of the Web

Explore the Cascade, Specificity, Box Model geometry, and modern one- and two-dimensional layout systems (Flexbox & CSS Grid) through interactive visualizers.

Interactive CSS Box Model Visualizer

Layout Engine

Adjust margin, border, padding, and compare content-box vs border-box sizing.

Margin24px
Border4px
Padding20px
Content Area240px × 100px
Total Rendered Element Size:240px × 100px
Box Dimension Sliders
Margin:24px
Border Width:4px
Padding:20px
Content Width:240px
Generated CSS
.card-element {
  box-sizing: border-box;
  width: 240px;
  height: 100px;
  padding: 20px;
  border: 4px solid #facc15;
  margin: 24px;
  background-color: #0284c7;
}

Interactive CSS Flexbox Playground

One-Dimensional Layout

Tweak main axis, cross axis, spacing, and wrapping in real time.

Items: 4
flex-direction:
justify-content:
align-items:
gap:16px
Generated CSS
.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
}
#1
#2
#3
#4
Preview updates live as you toggle flexbox rules
The Cascade Algorithm

CSS Specificity Weight Hierarchy

When multiple rules target the same element, browsers calculate a 3-column specificity score (IDs, Classes/Attributes, Elements).

1-0-0ID Selectors#main-header
0-1-0Classes & Pseudo-classes.btn:hover, [data-open]
0-0-1Element Selectorsarticle, h2, p
OverrideInline Stylesstyle="color: red;"