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
Se duas regras têm o mesmo peso, a última escrita vence.

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.

Nem todas as propriedades são herdadas.

Propriedades comuns que herdam:

  • color
  • font-family
  • font-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; }
Evite !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

Quando algo “não funciona” no CSS, quase sempre é por causa de cascata ou especificidade.

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
  • !important deve 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.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

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.

Cuidados com o notebook

Utilizar seu notebook em camas, sofás ou qualquer superfície macia pode obstruir as entradas e saídas de ar, elevando a temperatura e provocando danos a diversos componentes. Utilize-o sempre sobre uma superfície rígida. Saiba mais aqui.

Mario em Donkey Kong

O personagem Mario surgiu pela primeira vez no mundo dos games em um jogo chamado Donkey Kong, lançado em 1981. Mario, que naquela época se chamava Jumpman, não era o personagem principal do jogo, mas ele se tornaria um dos mais famosos personagens do mundo dos games. Saiba mais.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".