CSS para iniciantes: seletores, layout e mais

O que é CSS? CSS (Cascading Style Sheets, ou folhas de estilo em cascata) é a linguagem que define a aparência de uma página web: cores, fontes, espaçamentos, tamanhos, posição dos elementos e adaptação a telas diferentes. Enquanto o HTML organiza o conteúdo, o CSS cuida da apresentação.

Sem CSS, qualquer site seria uma sequência de textos pretos em fundo branco, um embaixo do outro. Com ele, o mesmo conteúdo pode virar um layout em colunas no computador e uma coluna única no celular. É uma das três bases do desenvolvimento front-end, ao lado de HTML e JavaScript.

Como HTML, CSS e JavaScript trabalham juntos

HTML: estrutura e significado do conteúdo (títulos, parágrafos, listas, imagens). Veja mais em o que é HTML.
CSS: aparência e layout.
JavaScript: comportamento e interatividade.

Separar essas responsabilidades facilita a manutenção. Você pode mudar todo o visual de um site trocando o CSS, sem mexer no conteúdo.

Sintaxe básica

Uma regra CSS tem um seletor, que indica quais elementos serão afetados, e um bloco de declarações, com propriedades e valores.

h1 {
  color: #1a1a1a;
  font-size: 2rem;
  margin-bottom: 16px;
}

Nesse exemplo, todos os títulos h1 ficam com a cor indicada, tamanho de fonte de 2rem e margem inferior de 16 pixels.

Tipos de seletor mais usados

Elemento: p, h2, a.
Classe: .botao, aplica a qualquer elemento com class="botao".
ID: #topo, para um elemento único.
Atributo: input[type="email"].
Pseudo-classe: a:hover, quando o mouse passa sobre o link.

Três formas de aplicar CSS

Forma	Como é escrita	Quando usar
Externa	Arquivo .css ligado com a tag link no head	Padrão recomendado para sites
Interna	Tag style dentro do HTML	Páginas únicas ou testes
Inline	Atributo style no próprio elemento	Casos pontuais; dificulta manutenção

O CSS externo tem outra vantagem: o navegador guarda o arquivo em cache e não precisa baixá-lo de novo a cada página visitada.

O que é CSS em cascata: especificidade e herança

O “cascata” do nome explica o que acontece quando duas regras disputam o mesmo elemento. O navegador decide com base em três critérios:

Importância: declarações com !important vencem as demais (use com moderação).
Especificidade: seletores mais específicos vencem. Um ID pesa mais que uma classe, que pesa mais que um elemento.
Ordem: com a mesma especificidade, vale a regra escrita por último.

Além disso, algumas propriedades são herdadas. Se você define a fonte no body, os parágrafos dentro dele herdam essa fonte.

Box model: a base do layout

Todo elemento é tratado como uma caixa formada por quatro camadas, de dentro para fora:

Content: o conteúdo em si.
Padding: espaço interno entre o conteúdo e a borda.
Border: a borda.
Margin: espaço externo, que separa a caixa das vizinhas.

Uma dica comum é usar box-sizing: border-box, que faz a largura definida incluir padding e borda. Isso evita muitas surpresas no alinhamento.

Layout moderno: Flexbox e Grid

Flexbox

Ideal para alinhar itens em uma dimensão, linha ou coluna. Resolve menus, barras de navegação e centralização com poucas linhas.

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

Grid

Pensado para layouts em duas dimensões, com linhas e colunas ao mesmo tempo, como galerias e estruturas de página.

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

Design responsivo

Com media queries, o CSS aplica regras diferentes conforme o tamanho da tela:

@media (max-width: 600px) {
  .colunas {
    grid-template-columns: 1fr;
  }
}

Unidades relativas como rem, % e vw, junto com imagens flexíveis, completam a base de um site que funciona bem no celular. Isso é essencial também para quem cria um PWA com Vue, que precisa se comportar como aplicativo em qualquer tela.

Recursos que valem aprender depois do básico

Variáveis CSS: --cor-principal: #0055cc; e uso com var(--cor-principal).
Transições e animações: movimentos suaves sem JavaScript.
Pré-processadores: Sass e Less adicionam recursos como aninhamento e funções.
Frameworks: Tailwind CSS e Bootstrap aceleram a criação de interfaces.
DevTools do navegador: inspecionar e editar CSS ao vivo é a melhor forma de aprender.

Organizando o CSS em projetos maiores

Em um site pequeno, um único arquivo resolve. Conforme o projeto cresce, a organização passa a fazer diferença na manutenção.

Nomes de classe claros: metodologias como BEM (.card__titulo--destaque) deixam explícito a que componente cada regra pertence.
Arquivos por componente: separar estilos de cabeçalho, rodapé e formulários facilita encontrar o que precisa mudar.
Evitar seletores muito específicos: cadeias longas como #menu ul li a span dificultam sobrescrever regras depois.
Reduzir o uso de !important: ele resolve um problema pontual, mas costuma criar outros.
Ferramentas de build: em projetos com frameworks, o CSS pode ser dividido em módulos e minificado automaticamente.

Essas práticas também ajudam no desempenho, já que arquivos enxutos carregam mais rápido e o navegador desenha a página com menos trabalho.

Como começar a praticar

Crie um arquivo index.html com alguns títulos, parágrafos e uma lista.
Crie um estilo.css e ligue-o ao HTML com a tag link.
Mude cores, fontes e espaçamentos e observe o resultado no navegador.
Monte um layout simples com Flexbox, como um cabeçalho com logo e menu.
Adicione uma media query para ajustar o layout no celular.

Outra prática útil é abrir as ferramentas de desenvolvedor do navegador (tecla F12) em qualquer site e observar quais regras estão aplicadas a cada elemento. Você pode desligar propriedades, mudar valores e ver o efeito na hora, sem alterar nada no site original. É uma forma rápida de entender como outros desenvolvedores resolveram problemas de layout.

Refazer páginas que você já conhece é um ótimo exercício, porque obriga a pensar em espaçamento, hierarquia e responsividade.

Perguntas frequentes

O que é CSS em poucas palavras?

É a linguagem de estilo da web. Ela define como os elementos de uma página HTML aparecem na tela: cores, fontes, espaçamentos e layout.

CSS é linguagem de programação?

Em geral, não é classificada assim. CSS é uma linguagem de estilo declarativa: você descreve o resultado visual, sem escrever lógica com laços e condições como em JavaScript.

Preciso saber HTML antes de aprender CSS?

Sim. O CSS estiliza elementos HTML, então conhecer a estrutura das tags é o primeiro passo. Os dois costumam ser aprendidos quase juntos.

Qual a diferença entre Flexbox e Grid?

Flexbox organiza itens em uma dimensão, linha ou coluna. Grid trabalha com linhas e colunas ao mesmo tempo, sendo mais indicado para a estrutura geral da página.

Quanto tempo leva para aprender CSS?

O básico se aprende em poucas semanas de prática. Dominar layout, responsividade e organização de projetos grandes leva mais tempo e vem com a experiência.

O que levar dessa leitura

Entender o que é CSS é o passo que transforma páginas cruas em sites agradáveis e funcionais. Com seletores, cascata, box model, Flexbox, Grid e media queries, você já consegue construir layouts modernos e responsivos, e o restante vem com prática e projetos reais.