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?

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

Donkey Kong

A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.

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".