Introdução ao CSS
Use CSS para estilizar elementos HTML, criar layouts de páginas web, definir cores, fontes e muito mais. Aprenda a estilizar páginas web com CSS.
Cascading Style Sheets (CSS) é a linguagem que controla como uma página web parece. Enquanto o HTML define o conteúdo e a estrutura de uma página (títulos, parágrafos, listas, links), o CSS descreve sua apresentação — cores, fontes, espaçamento, tamanhos e layout. Os dois trabalham juntos: o HTML é o esqueleto, o CSS é a pele.
O CSS foi criado pelo World Wide Web Consortium (W3C) e é hoje um padrão aberto suportado por todos os navegadores modernos.
Esta página explica o que é CSS, por que ele existe, como uma regra CSS é escrita e qual é o próximo passo.
Por Que o CSS Existe
No início da web, a estilização era misturada diretamente no HTML usando atributos e tags de apresentação. Isso tornava as páginas difíceis de manter: mudar uma cor significava editar cada elemento em cada página. O CSS resolve isso ao separar o conteúdo da apresentação. Você escreve sua marcação uma vez e controla sua aparência a partir de um conjunto separado de regras.
Essa separação traz três grandes vantagens:
- Uma mudança, aplicada em todo lugar. Uma única folha de estilos externa pode estilizar todas as páginas de um site. Atualize um arquivo e o site inteiro muda.
- HTML mais limpo e menor. Sua marcação permanece focada no significado, o que é mais fácil de ler e melhor para acessibilidade e SEO.
- Design reutilizável e consistente. As mesmas regras se aplicam automaticamente a cada elemento correspondente, então botões, títulos e links têm a mesma aparência em todo o site.
Como Uma Regra CSS Se Parece
Uma regra CSS tem duas partes: um seletor que escolhe quais elementos estilizar, e um bloco de declaração (dentro de { }) que lista o que alterar. Cada declaração é um par propriedade: valor;.
p {
color: blue;
font-size: 16px;
}Nesta regra:
pé o seletor — ele seleciona todos os elementos<p>(parágrafo).colorefont-sizesão propriedades — as coisas que estão sendo estilizadas.bluee16pxsão valores — o que cada propriedade recebe.- O ponto e vírgula
;encerra cada declaração; as chaves{ }as agrupam.
Aqui está uma página completa que usa CSS para estilizar seu título e parágrafo:
<!DOCTYPE html>
<html>
<head>
<title>My first CSS page</title>
<style>
h1 {
color: #1c87c9;
text-align: center;
}
p {
color: #555;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>O título fica azul e centralizado, e o parágrafo torna-se cinza e maior — tudo sem tocar no próprio texto.
Onde o CSS Fica
Você pode aplicar CSS de três maneiras, e você as encontrará todas no capítulo Como Adicionar CSS:
- Externo — regras salvas em um arquivo
.cssseparado e vinculadas à página. Esta é a abordagem padrão para sites reais, porque um arquivo estiliza muitas páginas. - Interno — regras colocadas dentro de um elemento
<style>no<head>da página (como no exemplo acima). - Inline — um atributo
styleem um único elemento, usado para ajustes rápidos pontuais.
Qual É o Próximo Passo
Agora que você sabe o que é CSS, continue com os fundamentos:
- Sintaxe CSS — a anatomia de uma regra em detalhes.
- Como Adicionar CSS — estilos inline, internos e externos.
- Seletores CSS — todas as formas de selecionar elementos.
- Id e Class no CSS — selecionando elementos específicos por nome.