O que é CSS?
CSS, sigla de Cascading Style Sheets ou folha de estilos em cascata, é a linguagem que dá aparência ao conteúdo estruturado em HTML. Cor de fundo, tamanho da fonte, espaço entre blocos, sombra de botão e comportamento do menu em telas menores saem todos do CSS.
O funcionamento se apoia em regras. Você aponta um elemento com um seletor e declara as propriedades que ele deve ter. A regra h1 { color: #123456; font-size: 32px; } diz que todo título principal fica naquele tom e naquele tamanho.
A palavra cascata explica o comportamento do CSS quando duas regras discordam. O navegador resolve o conflito por três critérios: especificidade do seletor, ordem em que a regra aparece e presença de marcações de prioridade. Um seletor mais específico vence um mais genérico.
O CSS carrega a responsabilidade pelo layout responsivo. As media queries aplicam regras diferentes conforme a largura da tela, e recursos como Flexbox e Grid organizam blocos que se reajustam sozinhos. É por isso que a mesma página serve celular e monitor.
Como funciona na prática?
O ciclo de uso do CSS segue quatro passos:
- O HTML declara a folha de estilos no
<head>, com um<link>para o arquivo.css. - O navegador baixa o arquivo e o interpreta antes de pintar a tela.
- Cada regra é combinada com os elementos correspondentes da página.
- Conflitos entram na cascata e o navegador aplica o valor vencedor de cada propriedade.
Um exemplo de responsividade:
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
.cards { grid-template-columns: 1fr; }
}Três colunas no desktop, uma coluna no celular, sem duplicar o conteúdo.
O CSS afeta a performance de site por dois caminhos. Ele bloqueia a renderização enquanto é baixado, e arquivos grandes atrasam a primeira pintura. Em projetos com CMS, cada plugin costuma injetar sua própria folha de estilos, e o total cresce rápido.
Exemplos de uso
- Uma marca define suas cores e tipografia em variáveis CSS no topo do arquivo. Quando o cliente troca o tom principal do azul, uma linha muda o site inteiro.
- Um e-commerce usa Grid para a vitrine: quatro produtos por linha no desktop, dois no tablet e um no celular, tudo com a mesma marcação HTML.
- Uma agência aplica CSS para diferenciar visualmente o botão principal do secundário em uma landing page, sem alterar nada na estrutura da página.
Erros comuns
- Escrever seletores excessivamente específicos e criar uma guerra de prioridade que só se resolve com marcações de força.
- Usar
!importantcomo solução padrão, o que torna o CSS difícil de manter. - Carregar frameworks de estilo inteiros para usar meia dúzia de classes.
- Ajustar espaçamentos com valores fixos em pixels em toda parte, o que quebra em telas fora do padrão testado.
- Acumular folhas de estilo de plugins desativados e nunca revisar o que ainda é carregado.
Perguntas frequentes sobre CSS
Qual a diferença entre CSS e HTML?
O HTML define o que é cada trecho de conteúdo: título, parágrafo, imagem, link. O CSS define como esse conteúdo aparece: cor, tamanho, espaçamento e posição. A mesma página HTML pode receber folhas de estilo diferentes e ganhar aparências completamente distintas.
O que significa cascata no CSS?
Cascata é o mecanismo que decide qual regra vence quando duas tentam formatar o mesmo elemento de formas diferentes. O navegador avalia a especificidade do seletor, a ordem de declaração e as marcações de prioridade, aplicando o valor vencedor para cada propriedade em conflito.
Preciso de CSS se uso um construtor visual?
O construtor gera o CSS por você conforme você arrasta e ajusta os blocos. Saber o básico ajuda em duas situações: quando algo não fica exatamente como o design pedia, e quando você precisa entender por que a página ficou pesada e qual arquivo cortar.