CSS Visual Diagrams

1. Centering Content Horizontally
Centered Content (width: 50%, margin-left: 25%)
25% margin 50% width 25% margin
2. Interactive Box Model
Box Model Controls:
Margin
Border
Padding
Content
(width × height)
3. CSS Specificity Hierarchy
!important (Highest Priority)
Inline Styles
IDs (#id)
Classes (.class), Attributes, Pseudo-classes
Elements (div, p, h1...)
4. CSS Positioning Types
Static (Default)
Relative (offset from normal position)
Absolute (relative to parent)
Fixed (relative to viewport)
5. CSS Display Properties
Block Element 1
Block Element 2
Inline 1 Inline 2 Inline 3
Inline-Block 1 Inline-Block 2
6. CSS Float Property - Interactive
Float Controls:


Element 1
Element 2
This text demonstrates how content flows around floated elements. Try changing the float properties above to see how the layout changes. Floated elements are removed from the normal document flow.
7. Z-Index Stacking Context - Interactive
Z-Index Controls:
Z-Index: 1 (Green)
Z-Index: 2 (Orange)
Z-Index: 3 (Red)
8. Advanced Interactive Demo
Position & Display Controls:

Transform Controls:
Color & Style Controls:

Demo Element
Drag me around!
Live CSS Display:
Live CSS Values:
Position: static
Display: block
Z-Index: auto
Transform: none
Opacity: 1
💡 Keyboard Shortcuts: Ctrl+R (Reset), Ctrl+Z (Randomize Z-Index), Ctrl+F (Reset Float)
🔊

Interactive Flexbox Properties Demo

Container Properties

flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 0px;

Selected Item Controls

Click on an item to select it

Item 1
Item 2
Item 3
Item 4
Item 5

How to Use This Demo

Click the buttons to change flexbox properties and see the effects in real-time. Click on any item to select it and modify its individual properties like flex-grow, flex-shrink, flex-basis, align-self, and order!

Interactive CSS Grid Explorer

📐 Grid Template Columns

📏 Grid Template Rows

🎯 Gap

📍 Justify Content

⬆️ Align Content

🔄 Reset & Examples

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

📋 Current CSS Code:

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;

📚 CSS Grid Terminology

Grid Container
Grid Item
Cell
Grid Item
Grid Item
Key Terms:
  • Grid Container: Parent element with display: grid
  • Grid Items: Direct children of the grid container
  • Grid Lines: Dividing lines that create the structure
  • Grid Tracks: Space between two adjacent grid lines (rows/columns)
  • Grid Cell: Single unit of the grid
  • Grid Area: Rectangular area occupied by one or more cells