Se eu coloco a cor no body, ela não pega no botao__secundario nem no container__botao, o que posso fazer para não ter que colocar o color em cada elemento do css?
Solucionado
Se eu coloco a cor no body, ela não pega no botao__secundario nem no container__botao, o que posso fazer para não ter que colocar o color em cada elemento do css?
E aí, Pedro Ernesto, tranquilo? Pô, isso aí é bem comum, mano. Às vezes a gente quer definir uma cor lá no body esperando que ela pegue em todos os elementos, mas não rola sempre assim. Mas, tem jeito de resolver isso sem repetir o código pra cada elemento.
O lance é que os elementos filhos não herdam automaticamente a cor definida no body. A cor é uma propriedade que não fica "subindo" na árvore dos elementos.
Mas calma, não precisa sair colocando a cor em cada elemento separado. Tu pode usar os seletores no CSS pra fazer isso de um jeito mais organizado.
Primeira coisa é: cria uma classe ou id com a cor que tu quer no body. Tipo assim:
.cor-principal {
color: #ff9900; /* ou a cor que tu quiser */
}
Daí, no teu HTML, tu bota essa classe lá no body:
<body class="cor-principal">
<!-- teu conteúdo aqui -->
</body>
Agora, pra aplicar essa cor nos botões e no container, tu pode usar essa classe no CSS também. Olha só:
.cor-principal .botao__secundario {
color: inherit; /* herda a cor do elemento pai, no caso o body */
}
.cor-principal .container__botao {
background-color: inherit; /* herda a cor de fundo do elemento pai */
}
Usando o inherit, tu tá dizendo pros elementos filhos pegarem as propriedades de cor do elemento pai, que é o body com a classe .cor-principal.
E assim, tu não precisa repetir a cor em cada elemento, só lá no body e depois usando o inherit nos elementos que tu quer que herdem a cor.
Espero que isso resolva! Qualquer coisa tamo aqui pra trocar ideia.