Programação B

CSS: a Descrição Visual

O HTML define o que o conteúdo é. O CSS (Cascading Style Sheets) define como ele aparece. Cores, fontes, espaçamento, posicionamento — tudo isso é responsabilidade do CSS.

CSS funciona com regras. Cada regra tem um seletor (que elementos são afetados) e um bloco de declarações (que propriedades mudam):

h1 {
  color: #1a202c;
  font-size: 1.8rem;
}

Esse CSS diz: “todos os <h1> devem ter a cor #1a202c (um cinza escuro) e tamanho de fonte 1.8rem”.

Estilizando o card

Adicione um bloco <style> dentro do <head>:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TamoJunto - Eventos</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      background: #f7fafc;
      color: #1a202c;
      max-width: 720px;
      margin: 0 auto;
      padding: 2rem 1rem;
    }

    article {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1rem;
    }

    article h2 {
      margin: 0 0 0.5rem;
      font-size: 1.3rem;
    }

    article time {
      display: block;
      color: #718096;
      font-size: 0.9rem;
      margin-bottom: 0.75rem;
    }

    article p {
      margin: 0.25rem 0;
      font-size: 0.95rem;
    }

    button {
      margin-top: 1rem;
      padding: 0.5rem 1.5rem;
      background: #3182ce;
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 0.9rem;
    }

    button:hover {
      background: #2b6cb0;
    }
  </style>
</head>

Recarregue a página. O card agora tem fundo branco, bordas arredondadas, espaçamento confortável e um botão azul. Mesma estrutura HTML — aparência completamente diferente.

Seletores e a cascata

No CSS acima, article h2 é um seletor descendente: seleciona todo <h2> que esteja dentro de um <article>. Se houvesse um <h2> fora de um article, essa regra não o afetaria.

E quando duas regras conflitam? Se eu escrever:

h2 { color: red; }
article h2 { color: blue; }

Qual cor o <h2> dentro do <article> terá? Azul. O CSS tem regras de especificidade: um seletor mais específico (article h2) vence um mais genérico (h2). Se a especificidade for igual, a última regra no arquivo vence — a cascata (cascade, o “C” de CSS).

Existem vários tipos de seletores: por tag (p), por classe (.card), por id (#header), por atributo ([type="text"]), combinados (article > h2). Cada tipo tem um peso diferente de especificidade. A regra completa está documentada na MDN¹, mas o princípio geral é: quanto mais específico o seletor, maior a prioridade.

1. A regra completa de especificidade está documentada em Specificity — MDN. Na prática, usar apenas seletores de classe (.card, .event-title) e evitar !important resolve 90% dos conflitos. ↩