"I don't understand," she whispered, clutching her coffee like a crucifix. "I told it to be red."
/* More specific only when necessary / .hero .button { background-color: darkred; / Override only for hero buttons */ } CSS Demystified Start writing CSS with confidence
The Keeper snorted. "CSS is architecture . Before you paint the walls, you must understand the room." "I don't understand," she whispered, clutching her coffee
Elara looked. The paragraph was cramped against the edges. She wrote: Before you paint the walls, you must understand the room
/* 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; }
"Some properties are family heirlooms," the Keeper explained. "If you set font-family on the <body> , every child— <p> , <h1> , <li> —inherits it. You don't have to repeat yourself."
"Because something directly targeted the <p> . Direct styles beat inheritance. The river only flows to untouched land."