CSS: a aparência, separada do conteúdo

O CSS é a segunda tecnologia que roda sem instalar nada. Você escreve um segundo arquivo de texto, liga ele ao HTML com uma linha, e a página inteira muda de cara sem que uma palavra do conteúdo seja tocada. Essa separação é a ideia que sustenta o resto do front end.

O que CSS resolve

Uma página só com HTML aparece do jeito que o navegador decidiu. Abrimos uma aqui em 15/08/2026 no Chromium: Times New Roman preta sobre fundo branco, texto ocupando os 1264 pixels da janela de ponta a ponta, lista com bolinha. Ninguém escolheu nada disso.

Para mudar a aparência dentro do próprio HTML, você teria que repetir a decoração elemento por elemento, em cada arquivo. Trocar a cor do site viraria uma edição de centenas de páginas, e uma delas ficaria pra trás. O CSS tira essas decisões do HTML e guarda todas num arquivo só, que serve quantas páginas você quiser.

Os conceitos que você precisa antes da primeira linha

• Regra, seletor e declaração. Uma declaração é um par de propriedade e valor separados por dois-pontos, como color: red;. As declarações ficam dentro de chaves, e o seletor na frente diz a quais elementos elas se aplicam. Seletor mais bloco de declarações formam uma regra.
• Os três lugares onde o estilo pode morar. Num arquivo .css à parte ligado pela tag <link>, dentro de uma tag <style> no <head>, ou no atributo style de um elemento. O arquivo à parte é o único que atende várias páginas de uma vez.
• Cascata e especificidade. Quando duas regras brigam pela mesma propriedade, o navegador conta o peso do seletor em três colunas: ID, classe e tipo. Compara da esquerda para a direita, e uma coluna de ID vence qualquer quantidade das outras duas. A ordem no arquivo só entra como desempate quando as três colunas empatam.
• Herança. Algumas propriedades descem sozinhas para os elementos de dentro. Você escreve a fonte e a cor uma vez no body e os parágrafos herdam. Outras propriedades não descem, como borda e margem, e você precisa dizer explicitamente em quem elas valem.
• Box model. Cada elemento é uma caixa com quatro camadas: conteúdo, padding, border e margin. No modelo padrão, width vale para a área de conteúdo, e o padding e a borda somam por fora. Foi por isso que a coluna de max-width: 640px do teste abaixo mediu 680 pixels na tela, com os 20 de padding de cada lado.

A linguagem por dentro: seletores, cascata e a caixa

CSS também não é linguagem de programação: é linguagem de regras de estilo. Cada regra tem um seletor (em quem aplicar) e um bloco de declarações (o que aplicar). O nome da linguagem está na palavra cascata: quando duas regras disputam o mesmo elemento, vence a mais específica, e no empate vence a que veio por último.

• Os três seletores do dia a dia: por elemento (p), por classe (.card) e por id (#menu). Especificidade cresce nessa ordem, e é por isso que estilizar por classe é o padrão: dá pra sobrescrever sem guerra.
• Todo elemento é uma caixa: conteúdo, padding (respiro interno), border e margin (distância dos vizinhos). Metade dos layouts quebrados da vida é alguém confundindo padding com margin.
• Variáveis existem aqui também: as custom properties. Declare --cor-marca: #0EA5E9; uma vez e use var(--cor-marca) em todo lugar, e o site inteiro muda num ponto só.
• Layout moderno é flex e grid: display: flex alinha itens numa direção. display: grid monta linhas e colunas. Os dois aposentaram os truques com float que você ainda vai ver em código antigo.

:root { --cor-marca: #0EA5E9; }        /* variável */

.card {                                 /* seletor de classe */
  border: 1px solid var(--cor-marca);
  padding: 16px;                        /* respiro interno da caixa */
  margin: 0 auto;                       /* centraliza a caixa */
  display: flex;
  gap: 12px;                            /* espaço entre os itens */
}

.card:hover { background: #E0F2FE; }    /* estado */

Leia qualquer CSS de produção e você vai ver esses quatro assuntos o tempo todo: seletor, caixa, variável e flex/grid. O resto é vocabulário que se aprende sob demanda.

De novo sem editor especial, sem servidor e sem conexão. Um editor de texto e um navegador bastam.

1. Abra a pasta onde está o ola.html do tutorial de HTML. Se você não tem esse arquivo, crie um com este conteúdo:

   <!DOCTYPE html>
   <html lang="pt-BR">
     <head>
       <meta charset="UTF-8" />
       <title>Minha primeira página</title>
     </head>
     <body>
       <h1>Olá, mundo</h1>
       <p>Esta página está no meu computador e o navegador entendeu a estrutura dela.</p>
       <ul>
         <li>Um item</li>
         <li>Outro item</li>
       </ul>
       <p><a href="https://xentory.com.br/aprenda/stack-web/">Voltar para o mapa</a></p>
     </body>
   </html>

2. Na mesma pasta, crie um arquivo novo e salve como estilo.css, com este conteúdo:

   body {
     background-color: #f5f5f0;
     color: #1a1a1a;
     font-family: system-ui, sans-serif;
     line-height: 1.6;
     max-width: 640px;
     margin: 40px auto;
     padding: 0 20px;
   }
   
   h1 {
     color: #0b62d6;
     font-size: 2rem;
   }
   
   ul {
     list-style: square;
   }
   
   a {
     color: #0b62d6;
   }

3. Volte ao ola.html e acrescente uma linha dentro do <head>, logo abaixo do <title>:

   <link rel="stylesheet" href="estilo.css" />

   Salve os dois arquivos.

4. Dê dois cliques no ola.html. Ele abre no navegador, agora com o seu estilo.

5. Na mesma pasta, crie um segundo arquivo e salve como estilo-noite.css:

   body {
     background-color: #12141a;
     color: #e8e8e8;
     font-family: Georgia, serif;
     line-height: 1.9;
     max-width: 640px;
     margin: 40px auto;
     padding: 0 20px;
   }
   
   h1 {
     color: #7ec8ff;
     font-size: 2.8rem;
   }
   
   ul {
     list-style: none;
     padding-left: 0;
   }
   
   a {
     color: #7ec8ff;
   }

6. No ola.html, mude uma palavra só na linha do <link>:

   <link rel="stylesheet" href="estilo-noite.css" />

   Salve e recarregue a página no navegador com F5.

O que CSS não é

CSS não é uma pilha de regras em que a última escrita sempre vence. Quando duas regras disputam a mesma propriedade, o navegador pesa o seletor antes de olhar a posição no arquivo. Um seletor com ID ganha de um com dez classes, mesmo estando cinquenta linhas acima. A ordem no arquivo entra depois, só para desempatar seletores de peso idêntico.

Isso explica o sintoma mais comum de quem está começando: a regra nova aparentemente não pega, e a saída vira !important em tudo. O que está acontecendo quase sempre é outro seletor mais específico ganhando a disputa. Vale abrir o inspetor do navegador e ler qual regra o navegador aplicou, com a que perdeu riscada logo abaixo.

Fontes

• MDN Web Docs, CSS, onde o CSS é definido como a linguagem que descreve a apresentação de um documento escrito em HTML ou XML. Conferida em 15/08/2026.
• MDN Web Docs, sintaxe do CSS, de onde vieram as definições de declaração, bloco de declarações, seletor e regra. Conferida em 15/08/2026.
• MDN Web Docs, primeiros passos com CSS, de onde saiu a forma de ligar a folha de estilo ao HTML com a tag <link>. Conferida em 15/08/2026.
• MDN Web Docs, especificidade, com a conta das três colunas de ID, classe e tipo, e a regra de que a ordem no arquivo só desempata. Conferida em 15/08/2026.
• MDN Web Docs, box model, com as quatro camadas da caixa e a diferença entre o modelo padrão e box-sizing: border-box. Conferida em 15/08/2026.
• W3C, CSS, a casa das especificações e do estado de cada módulo. Conferida em 15/08/2026.

O hello world desta página rodou em 15/08/2026: os três arquivos foram salvos numa pasta, servidos em 127.0.0.1 e abertos no Chromium via Playwright. Sem a linha do <link>, o navegador aplicou Times New Roman preta e a caixa do corpo mediu 1264 pixels. Com estilo.css, o fundo veio rgb(245, 245, 240), a fonte system-ui, o corpo 680 pixels e o h1 em rgb(11, 98, 214) a 32 pixels, com marcador square. Trocando só o href para estilo-noite.css, o fundo virou rgb(18, 20, 26), a fonte Georgia, o h1 foi para rgb(126, 200, 255) a 44,8 pixels e o marcador da lista sumiu, com o texto da página idêntico nas duas leituras.

Para continuar

Se você pulou direto pra cá, o HTML vem antes e leva dez minutos. O passo seguinte é JavaScript, que faz a página reagir ao que a pessoa clica, e que pode trocar a folha de estilo sozinho, sem você editar o arquivo. Os três juntos abrem o resto do mapa.

O curso desta trilha está em preparação. A lista paga menos.

Os tutoriais daqui continuam gratuitos. O que está a caminho é um curso pago que transforma esse mapa em formação guiada, na ordem certa e com projeto. Deixe seu e-mail: você recebe os estudos novos gratuitos e, no lançamento, o desconto de quem entrou na lista primeiro.