Quando várias regras CSS tentam estilizar o mesmo elemento, o navegador precisa decidir qual delas vence.
Essa decisão segue três conceitos fundamentais: cascata, herança e especificidade.
O que é a cascata?
A cascata define a ordem em que as regras CSS são avaliadas.
De forma simplificada, o navegador considera:
- A origem do estilo
- A ordem em que ele aparece
- A especificidade do seletor
Exemplo simples de cascata
p { color: blue; }
p {
color: red;
}
Nesse caso, os parágrafos ficarão vermelhos, porque essa regra aparece por último.
O que é herança?
A herança permite que alguns estilos sejam passados dos elementos “pais” para os “filhos”.
Exemplo:
body { font-family: Arial, sans-serif; color: #333; } Os textos dentro do <body> herdam essas propriedades.
Propriedades comuns que herdam:
colorfont-familyfont-size
O que é especificidade?
A especificidade define o “peso” de um seletor. Quanto mais específico ele for, maior a chance de vencer conflitos.
Ordem do menos específico para o mais específico:
- Seletor de tag
- Seletor de classe
- Seletor de ID
- CSS inline
Exemplo de especificidade
p { color: blue; }
.texto {
color: green;
}
#destaque {
color: red;
}
Se um parágrafo tiver:
<p id="destaque" class="texto">Exemplo</p> Ele ficará vermelho, porque o ID é mais específico.
E o temido !important?
O !important força uma regra a vencer quase qualquer conflito. No exemplo abaixo, caso existam outras regras de cores sendo aplicadas aos parágrafos, o azul vai prevalecer por possuir o complemento !important.
p { color: blue !important; } !important. Ele quebra a lógica do CSS e dificulta manutenção. Se você precisa usar !important com frequência, o problema está na estrutura do CSS.
Modelo mental correto
Antes de tentar soluções desesperadas, pergunte:
- Existe outra regra afetando esse elemento?
- Ela é mais específica?
- Ela aparece depois?
💾🧠 Resumo da aula para nunca mais esquecer
- A cascata define a ordem das regras
- Herança permite que estilos passem para filhos
- Especificidade define qual regra vence
- ID é mais forte que classe, que é mais forte que tag
!importantdeve ser evitado
Na próxima aula, vamos começar a parte visual do CSS, falando sobre cores 🎨✨
HARDWARE
Entendendo o seu computador
O que há dentro do meu computador?
Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.
Você Sabia?
Tetris
Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.
Civilization
A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.
Recorde de patentes
A IBM detém o recorde de patentes em um único ano, atingindo a marca de 4186 registros no ano de 2008. Clique aqui e saiba mais sobre esta gigante do mundo da tecnologia.
Computadores de 1,5 tonelada
Em 1949 a revista Popular Mechanics fez uma previsão para o futuro, dizendo: "Um dia os computadores pesarão menos do que 1,5 tonelada". E pensar que temos smartphones capazes de realizar milhões de vezes mais operações do que os computadores daquela época.
Asteroids
O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.










