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?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

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.

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.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.