div { width: 300px; padding: 20px; /* Space inside the box, around the text */ border: 5px solid black; /* The edge of the box */ margin: 30px; /* Space outside the box, pushing others away */ } The box breathed. The text relaxed away from the borders. Other elements shuffled aside respectfully.
The button on the screen turned red. Stayed red. And for the first time, Elara smiled.
The river cleared. The manor fell silent. Elara stood before the main screen. The ghost—a sad, tangled mass of !important flags and overly specific #id #id #id selectors—dissolved.
Elara looked. The paragraph was cramped against the edges. She wrote: CSS Demystified Start writing CSS with confidence
"See?" the Keeper smiled. "You fixed one box. But the ghost has other ideas. Follow the Cascade." Elara climbed a spiral staircase. On each step floated a line of CSS.
The Keeper, an old woman knitting with what looked like HTML tags, didn't look up. "You think CSS is decoration. Pretty colors. Rounded corners."
A ghostly <div> had color: gray; set on it, but its <p> child was black. div { width: 300px; padding: 20px; /* Space
"I don't understand," she whispered, clutching her coffee like a crucifix. "I told it to be red."
She wasn't telling the browser what to do. She was describing a system. And the system worked.
"Well... isn't it?"
"Padding pushes in ," the Keeper said. "Margin pushes out . Most of your layout nightmares come from forgetting that every <p> , every <button> , every <span> is just a box arguing with its neighbors."
At the top landing, a ghostly !important flag drifted past. It was screaming. Everything it touched froze—immutable, unchangeable.
/* Global inheritance */ body { font-family: 'Georgia', serif; color: #111; line-height: 1.5; } /* Low-specificity, reusable classes / .button { display: inline-block; / Makes the box behave differently / padding: 12px 24px; / Top/Bottom, Left/Right */ background-color: red; color: white; border: none; border-radius: 8px; cursor: pointer; } The button on the screen turned red
She changed Rule B to be more specific: