Herança
Algumas propriedades passam dos pais para os filhos automaticamente, sem você precisar repeti-las em cada elemento. Outras, não.
Estudar esta lição interativa →Além da cascata, existe um segundo mecanismo que economiza uma quantidade enorme de CSS repetido: a herança. Certas propriedades, quando definidas num elemento, são automaticamente herdadas por todos os seus elementos filhos, a não ser que um filho defina a sua própria versão daquela propriedade.
A regra prática: propriedades de texto (color, font-family, font-size, line-height) geralmente herdam. Propriedades de caixa (border, padding, margin, width) geralmente não herdam, cada elemento define as suas próprias, do zero.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O primeiro parágrafo herda a cor do body; o segundo herda a cor do seu pai mais próximo (a div vermelha), não a do body.
Um exemplo de produto real: definir font-family e color uma única vez no body é o padrão universal de qualquer projeto de CSS, exatamente porque essas propriedades herdam. Sem herança, seria preciso repetir a mesma fonte e cor em cada <p>, <h1>, <li> da página, um desperdício enorme de código repetido.
Esperar que border ou padding definidos num elemento pai "passem" para os filhos, do mesmo jeito que color passa. Isso não acontece: cada caixa define seu próprio espaçamento e borda. Se um filho parece "herdar" um espaçamento, é mais provável que exista uma regra separada mirando ele diretamente.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione color na .caixa e veja a herança nos parágrafos filhos.