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.
She wasn't telling the browser what to do. She was describing a system. And the system worked.
"Why isn't it inheriting?" Elara asked.
Her senior dev, Marcus, leaned over. "You aren't telling the browser anything, Elara. You're suggesting . And something else has a louder voice." CSS Demystified Start writing CSS with confidence
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."
"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.
/* Rule A (Wins) */ #content .article p { color: green; /* Specificity: 100 + 10 + 1 = 111 */ } /* Rule B (Loses) / p { color: red; / Specificity: 1 */ } The river cleared
"How do I beat it?" Elara asked.
"The myths are the best teachers," he said. "Ask for the Keeper of the Cascade." Oakwood Manor was a creaking Victorian house, but inside, every wall was a live website. Text overflowed its containers like vines. Images floated chaotically, knocking into paragraphs. A clock displayed time in the wrong font.
/* 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 ghost—a sad, tangled mass of
"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."
She changed Rule B to be more specific: