Como o CSS funciona: a conexão com o HTML

Entenda como o CSS 'conversa' com o HTML para aplicar estilos aos elementos.

Na lição anterior, vimos que o HTML é a estrutura e o CSS é a "roupa" ou a "decoração". Mas como exatamente essa "roupa" é vestida na estrutura? Como o CSS sabe qual parte do HTML ele deve estilizar?

A conexão entre o CSS e o HTML é feita através de seletores. Pense nos seletores como "endereços" ou "etiquetas" que o CSS usa para encontrar os elementos HTML que ele precisa estilizar.

O Processo Básico

Quando um navegador carrega uma página web, ele faz duas coisas principais:

  1. Lê o HTML: Ele constrói uma representação interna da estrutura da página, chamada de DOM (Document Object Model). Pense no DOM como um mapa detalhado de todos os elementos HTML e suas relações.
  2. Lê o CSS: Ele processa todas as regras de estilo que você escreveu.

Depois de ler os dois, o navegador "casa" as regras CSS com os elementos HTML correspondentes no DOM. Ele usa os seletores CSS para encontrar os elementos e aplica os estilos definidos.

A Mágica dos Seletores

Vamos ver um exemplo simples:

Imagine que você tem um parágrafo no seu HTML:

<p>Este é um parágrafo de texto.</p>

E você quer que esse parágrafo seja azul. No seu CSS, você escreveria algo assim:

p {
  color: blue;
}

Nesse exemplo:

  • p é o seletor. Ele diz ao CSS: "Encontre todos os elementos <p> no HTML."
  • color: blue; é a declaração de estilo. Ela diz: "Para os elementos que você encontrou, mude a cor do texto para azul."

O navegador então procura por todas as tags <p> no seu HTML e aplica a cor azul a elas. Simples, não é?

Estrutura de uma Regra CSS

Toda regra CSS segue uma estrutura básica:

seletor {
  propriedade: valor;
  propriedade-2: valor-2;
  /* ... outras declarações ... */
}
  • Seletor: Aponta para o elemento HTML que você quer estilizar (ex: p, h1, body).
  • Chaves {}: Delimitam o bloco de declarações de estilo para aquele seletor.
  • Propriedade: É a característica que você quer mudar (ex: color, font-size, background-color).
  • Valor: É o que você quer aplicar àquela propriedade (ex: blue, 16px, red).
  • Ponto e vírgula ;: Separa cada declaração de estilo. É muito importante não esquecer!

A "Cascata" do CSS

O "Cascading" (Cascata) em CSS é uma parte fundamental de como ele funciona. Significa que as regras de estilo "caem" ou são aplicadas em uma ordem específica, e algumas regras podem ter mais "peso" que outras.

Pense em uma cachoeira: a água (estilos) flui de cima para baixo. Se houver duas regras que tentam estilizar a mesma propriedade de um elemento, o navegador precisa decidir qual delas "vence". Essa decisão é baseada em alguns fatores, como:

  1. Ordem: A última regra definida geralmente "vence" se tiver a mesma especificidade.
  2. Especificidade: Regras mais específicas (por exemplo, estilizar um elemento por seu ID) têm mais peso do que regras menos específicas (estilizar todos os parágrafos).
  3. Importância: Algumas regras podem ser marcadas como !important, o que lhes dá um peso extra (mas deve ser usado com cautela!).

Não se preocupe em entender todos os detalhes da cascata agora. O importante é saber que o CSS tem um sistema para resolver conflitos de estilo, garantindo que seus elementos tenham a aparência desejada.

Em Resumo

A conexão entre CSS e HTML é direta: o CSS usa seletores para identificar os elementos HTML e aplica as declarações de estilo (propriedade: valor;) a eles. O navegador então renderiza a página, mostrando o HTML estruturado e estilizado de acordo com suas regras CSS. É essa parceria que nos permite criar páginas web visualmente ricas e bem organizadas.