O Que É CSS? Um Guia Simples da Linguagem que Deixa a Web Bonita

Pense no seu site favorito. As cores, as fontes, o jeito como o menu fica no topo, o jeito como a página se reorganiza quando você vira o celular de lado. Nada disso vem das palavras da página. Vem de uma segunda linguagem que trabalha junto com elas, chamada CSS.

CSS quer dizer Cascading Style Sheets, ou folhas de estilo em cascata. Se o HTML é o conteúdo de uma página web (os títulos, parágrafos, links e imagens), o CSS é a sua aparência: cores, fontes, tamanhos, espaçamentos e layout. Este artigo explica, em linguagem simples, o que é o CSS, como ele funciona e por que, sem ele, a web pareceria um documento simples de 1993.

O que acontece se você tirar o CSS

O jeito mais fácil de ver o que o CSS faz é removê-lo. Abrimos o artigo da Wikipédia sobre CSS no Google Chrome, tiramos uma captura de tela, depois removemos todas as folhas de estilo da página e tiramos outra:

Mesma página, mesmo HTML, mesmas palavras. Sem CSS, o menu vira uma longa lista de links, o logo fica enorme e é preciso rolar muito só para chegar ao artigo. É o CSS que transforma um monte de conteúdo numa página com design.

As partes de uma regra CSS

O CSS é escrito como uma lista de regras. Cada regra diz "encontre estes elementos e mude estas coisas neles":

• O seletor (h1) diz a quais elementos a regra se aplica. Aqui, a todos os títulos principais.
• Uma propriedade (color, cor) é a coisa a mudar, e o seu valor (tomato, tomate) é a nova configuração. Sim, "tomato" é um nome oficial de cor no CSS.
• Juntos, uma propriedade e o seu valor formam uma declaração. Uma regra pode ter quantas quiser, cada uma terminando com ponto e vírgula.

A maioria dos sites guarda o seu CSS em arquivos separados, ligados a todas as páginas com uma tag <link>. Mude uma linha nesse arquivo e todas as páginas do site mudam de uma vez. Essa é a ideia por trás do nome folha de estilo: uma folha de instruções de estilo, compartilhada por muitas páginas.

O mesmo HTML, três visuais diferentes

Aqui está a página da receita de panqueca do nosso artigo sobre HTML. Mantivemos o HTML exatamente igual e o ligamos a dois arquivos CSS diferentes:

Aqui está a folha de estilo "aconchegante" inteira. Mesmo sem saber CSS, dá para adivinhar o que a maioria das linhas faz (background é o fundo, border é a borda, font-family é a fonte):

1body {
2  font-family: Georgia, serif;
3  background: #fdf6ec;
4  color: #4a3728;
5  max-width: 420px;
6  margin: 32px auto;
7  padding: 8px 24px 24px;
8  border: 3px dashed #e0a96d;
9  border-radius: 16px;
10}
11h1 { color: #c0562f; }
12h2 {
13  color: #8a5a2b;
14  border-bottom: 2px solid #e0a96d;
15}
16a { color: #c0562f; }
17button {
18  background: #c0562f;
19  color: white;
20  border: none;
21  padding: 10px 20px;
22  border-radius: 999px;
23  font-size: 16px;
24}

Essa separação entre conteúdo (HTML) e apresentação (CSS) é a grande ideia do CSS. Em 2003, um site chamado CSS Zen Garden a tornou famosa: ele convidava designers a mudar o visual de uma única página HTML usando só CSS, e chegaram centenas de designs completamente diferentes, de jardins japoneses a histórias em quadrinhos, todos a partir do mesmo HTML.

A "cascata": quando as regras discordam

Num site real, várias regras costumam se aplicar ao mesmo elemento, e nem sempre concordam. Uma regra diz que os parágrafos são azuis, outra diz que as notas são verdes. Qual vence? O CSS resolve isso com um conjunto de regras chamado cascata, e é daí que vem o "Cascading" do nome.

A ideia principal é vence a regra mais específica:

• Uma regra para todos os parágrafos (p) é bem geral.
• Uma regra para uma classe (.note) mira um grupo de elementos que você etiquetou com class="note" no HTML. Ela é mais específica, então vence a primeira.
• Uma regra para um ID (#special) mira um único elemento, etiquetado com id="special". É a mais específica das três, então o último parágrafo fica vermelho, mesmo sendo também um parágrafo e também uma nota.
• Se duas regras forem igualmente específicas, vence a que vem depois.

Algumas propriedades também são herdadas: se você define uma fonte no <body>, todos os parágrafos e títulos dentro dele usam essa fonte também, a menos que uma regra mais específica diga outra coisa. É por isso que uma linha de CSS pode mudar a fonte de um site inteiro.

Todo elemento é uma caixa

Para o navegador, todo elemento da página, seja um título, um parágrafo, uma imagem ou um botão, é um retângulo. O CSS controla o tamanho de cada caixa e o espaço em volta dela, em camadas:

• Conteúdo: o texto ou a imagem em si.
• Preenchimento (padding): um respiro dentro da caixa, entre o conteúdo e a borda.
• Borda (border): uma linha opcional em volta da caixa.
• Margem (margin): espaço vazio fora da borda, que mantém as outras caixas à distância.

Isso se chama modelo de caixa (box model), e depois que você o conhece, as páginas web começam a parecer o que realmente são: caixas dentro de caixas. O trabalho de um web designer é, em boa parte, decidir o tamanho dessas caixas e onde elas ficam. O CSS moderno tem ferramentas poderosas para isso, chamadas Flexbox (para alinhar caixas numa linha ou coluna) e Grid (para organizá-las em linhas e colunas, como numa planilha).

Cores no CSS

O CSS oferece vários jeitos de escrever uma cor. Estes quatro querem dizer exatamente o mesmo tom de vermelho:

Os mais estranhos, como #ff6347, se chamam códigos hex (hexadecimais). Cada pixel da tela é feito de luzinhas vermelha, verde e azul, e um código hex diz o brilho de cada uma, com dois dígitos para cada cor na base 16 (em que os dígitos vão de 0 a 9 e depois de a até f). ff quer dizer 255, o brilho máximo. Então #ff6347 quer dizer "vermelho no máximo, um pouco de verde, um pouco de azul": vermelho-tomate. Os designers normalmente escolhem as cores num seletor de cores, que escreve o código por eles.

Uma página, qualquer tela

Hoje, a maioria das visitas aos sites vem de celulares, então uma página precisa ficar boa em qualquer largura, de um celular pequeno a uma TV enorme. Isso se chama design responsivo, e é feito com CSS:

O segredo é a regra @media. Ela diz "só aplique estes estilos quando a tela atender a esta condição". Aqui, quando a tela tem 600 pixels de largura ou menos, as três colunas viram uma. O HTML é exatamente o mesmo nas duas telas; o navegador só aplica um CSS diferente.

O mesmo truque está por trás de outras coisas que você talvez já tenha notado: sites que mudam para o modo escuro quando o seu celular muda, e páginas que saem bonitas na impressão, sem menus nem anúncios.

Por dentro do CSS de uma página real

Quanto CSS um site real usa? Abrimos o artigo da Wikipédia em português sobre CSS no Chrome e contamos todas as regras de estilo da página:

• Uma única página usa 2.340 regras com 5.885 declarações, usando 392 propriedades diferentes.
• A propriedade mais comum é a boa e velha color (cor), seguida de background-color (cor de fundo).
• Os arquivos CSS somam 235 KB, mas viajam pela internet compactados, com cerca de 31 KB, e o seu navegador os guarda, então a próxima página da Wikipédia que você abrir carrega mais rápido.

O CSS não para de crescer

A primeira versão do CSS, em 1996, tinha 53 propriedades, a maioria sobre fontes, cores, margens e bordas. Perguntamos ao Chrome quantas propriedades ele acompanha hoje para cada elemento de uma página: 674. Elas cobrem animações, sombras, degradês, colunas, grades, rolagem, impressão e muito mais.

Não existe "CSS4". Depois do CSS2, a linguagem foi dividida em módulos separados (cores, fontes, grid, animações e assim por diante), cada um atualizado no seu próprio ritmo, e assim o CSS vai crescendo aos poucos.

Uma breve história do CSS

No começo da web, não havia CSS. As páginas eram estilizadas com tags HTML como <font color="red"> e <center>, e os designers usavam tabelas de forma improvisada para montar o layout, até com imagens invisíveis de "espaçamento" para empurrar as coisas para o lugar. Cada página tinha de repetir tudo isso, e mudar o design de um site significava editar página por página à mão.

Em 1994, Håkon Wium Lie, um norueguês que trabalhava com Tim Berners-Lee no CERN, propôs as Cascading HTML Style Sheets. Logo se juntou a ele Bert Bos, que vinha trabalhando na sua própria linguagem de estilos, e juntos eles deram forma ao CSS. A primeira versão oficial, o CSS1, saiu em dezembro de 1996.

Os navegadores demoraram para suportá-lo direito. Por anos, navegadores diferentes desenhavam o mesmo CSS de jeitos diferentes, e os web designers passavam boa parte do tempo com gambiarras. As coisas melhoraram aos poucos nos anos 2000, e em 2010 o designer Ethan Marcotte criou o termo design responsivo (responsive web design), bem quando os smartphones estavam tomando conta.

Os últimos anos trouxeram recursos que os designers esperaram por décadas: layouts com Grid (2017), variáveis para reaproveitar cores e tamanhos, aninhamento de regras umas dentro das outras e o seletor :has() (os dois disponíveis em todos os grandes navegadores até 2023), que deixa um estilo depender do que há dentro de um elemento.

Perguntas comuns

CSS é uma linguagem de programação? Assim como o HTML, normalmente não é considerada uma. Ela descreve como as coisas devem aparecer, em vez de dar instruções passo a passo. Dito isso, o CSS moderno faz coisas surpreendentes, como animações e layouts que se adaptam sozinhos.

Preciso aprender HTML primeiro? Sim, um pouco. O CSS estiliza elementos HTML, então você precisa saber o que é um <p> ou um <h1>. A boa notícia: o básico dos dois dá para aprender num fim de semana.

O que são Bootstrap e Tailwind? São coleções populares de CSS pronto, para que os desenvolvedores não precisem escrever tudo do zero. Por baixo, é tudo CSS.

Dá para ver o CSS de um site? Sim. Num computador, clique com o botão direito em qualquer parte de uma página e escolha Inspecionar. O painel que abre mostra o HTML daquele elemento de um lado e todas as regras CSS que se aplicam a ele do outro. Dá até para mudar valores e ver a página se atualizar (só na sua tela, é claro).

Glossário

• CSS: Cascading Style Sheets (folhas de estilo em cascata), a linguagem que controla a aparência das páginas web.
• Folha de estilo: um arquivo, ou bloco, de regras CSS.
• Regra: um seletor mais um conjunto de declarações, como h1 { color: tomato; }.
• Seletor: a parte da regra que escolhe quais elementos estilizar.
• Propriedade: algo que o CSS pode mudar, como color ou font-size.
• Valor: a configuração de uma propriedade, como tomato ou 32px.
• Classe: uma etiqueta que você dá a elementos no HTML (class="note") para o CSS estilizá-los em grupo.
• ID: uma etiqueta para um único elemento (id="special").
• Cascata: as regras que decidem qual estilo vence quando vários se aplicam.
• Modelo de caixa: conteúdo, preenchimento, borda e margem, as camadas da caixa de cada elemento.
• Código hex: uma cor escrita como # mais seis dígitos, como #ff6347.
• Design responsivo: fazer uma página se adaptar a qualquer tamanho de tela.
• Media query: uma regra @media que aplica estilos só em certas telas.

Para encerrar

O HTML diz o que há numa página. O CSS decide a sua aparência: as cores, as fontes, os espaçamentos e onde fica cada coisa. As suas regras escolhem elementos com seletores e mudam as suas propriedades, a cascata resolve as discordâncias e as media queries deixam uma mesma página caber em qualquer tela.

Tire o CSS, e até a Wikipédia vira uma longa lista de links com um logo gigante. Devolva-o, e o mesmo HTML vira uma página que você realmente quer ler. Para ver isso em qualquer site, clique com o botão direito e escolha Inspecionar: todos os estilos da página estão ali para você explorar.