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?

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.

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

Muitos aplicativos

Instalar vários aplicativos com o mesmo propósito, como editores de texto, reprodutores de músicas ou vídeos e até programas antívirus sobrecarregam o seu sistema operacional e ainda ocupam espaço desnecessário em seu HD. Tenha apenas um bom programa para cada função.

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Space Invaders

A partida mais longa do clássico Space Invaders durou incríveis 38 horas e 32 minutos e esta façanha foi conseguida por um jogador de apenas 12 anos! O jogo, claro, podia ser pausado para alimentação e descanso, mas ainda assim o recorde, estabelecido no dia 02/09/1980, ainda não foi quebrado. Saiba mais.