Introduction
What is CSS?
CSS (Cascading Style Sheets) controls the visual presentation of HTML — colors, fonts, spacing, layout, animations, and responsive design. HTML provides structure; CSS provides appearance.
The word "cascading" describes how multiple style rules can apply to the same element. CSS resolves conflicts through specificity, combined with source order and inheritance.
The word "cascading" describes how multiple style rules can apply to the same element. CSS resolves conflicts through specificity, combined with source order and inheritance.
Core Concept
The Cascade & Specificity
When multiple rules target the same element, CSS calculates a specificity score to decide which wins. The scoring system uses four levels:
CSS Specificity — Priority from low to highCSS3
12345678910
/* Specificity from lowest to highest: */
* { color: black; } /* (0,0,0,0) Universal */
p { color: blue; } /* (0,0,0,1) Element */
.highlight { color: green; } /* (0,0,1,0) Class */
#hero { color: red; } /* (0,1,0,0) ID */
p { color: purple !important; } /* Overrides ALL */
Specificity Calculator
Type a selector above to calculate its specificity score.
Core Concept
The Box Model
Every HTML element is a rectangular box. The CSS box model describes the four areas around every element. Hover each layer to learn more:
Hover a layer on the diagram
The box model has four layers: content, padding, border, and margin. Together they determine an element's total space.
Set
box-sizing: border-box to include padding and border inside the declared width — standard practice in modern CSS.
Feature
CSS Custom Properties (Variables)
Custom properties (prefixed with
--) defined on :root act as global CSS variables. Change one value and it updates everywhere instantly.
CSS Variables — Design token systemCSS3
12345678910
/* Define tokens on :root for global scope */
:root {
--primary: #b87c4f;
--font-size-base: 16px;
--radius: 12px;
}
.card {
border-radius: var(--radius);
border-top: 3px solid var(--primary);
}
Playground
CSS Live Editor
Edit CSS on the left — see the box change in real-time:
Live Editor — CSS updates instantly
Layout
Flexbox Explorer
Adjust the flex properties and watch items rearrange:
Live Flexbox — Change controls below
Item 1
Item 2 (tall)
Item 3
Item 4 (wide)
Item 5
Animations
CSS Animation Studio
Click an animation preset to apply it to the ball:
Proficiency
CSS Concepts Mastered
Selectors & Specificity95%
Flexbox92%
CSS Grid88%
Animations & Transitions85%
CSS Variables & Custom Properties90%
Responsive Design & Media Queries87%