Carregando...

Introdução ao CSS

HTML simples pode mostrar texto e ligações, mas as páginas parecem incompletas até controlar cor, espaçamento e layout. CSS é a linguagem que transforma marcação estruturada numa página desenhada.

O que é CSS?

CSS (Cascading Style Sheets) é a linguagem padrão para estilizar documentos HTML. Escreve regras que dizem ao browser como os elementos devem parecer: cor do texto, fontes, margens, fundos, layout e mais. HTML responde «o que é este conteúdo?» CSS responde «como deve aparecer?»

HTML e CSS trabalham juntos

Pense no HTML como o esqueleto da página e no CSS como a roupa e o acabamento. Continua a precisar de HTML sólido — títulos, parágrafos, ligações e landmarks — para o CSS ter elementos com sentido a estilizar. Este curso assume que já conhece HTML básico.

📊 Papéis de HTML vs CSS

Camada	Trabalho principal	Perguntas típicas
HTML	Estrutura e significado	Isto é um título, parágrafo ou ligação?
CSS	Apresentação e layout	Que cor, tamanho, espaçamento e disposição?
JavaScript (mais tarde)	Comportamento e interatividade	O que acontece ao clicar?

Estudará JavaScript num curso posterior. Por agora, mantenha a separação clara: estrutura em HTML, aspeto em CSS.

Primeiro olhar a uma regra CSS

Uma regra CSS tem um seletor (o que estilizar) e declarações (como estilizar). As declarações ficam dentro de chavetas e usam uma propriedade e um valor.

Uma regra simples

css

CSS Code

h1 {
color: navy;
font-size: 2rem;
}

O que esta regra faz

h1 é o seletor — aponta para cada elemento h1
color: navy; define a cor do texto
font-size: 2rem; define o tamanho do título
Cada declaração termina com ponto e vírgula
Aprofundará seletores e unidades mais tarde. Aqui basta ver a forma da regra.

Ver CSS numa página

Os browsers aplicam regras CSS aos elementos HTML correspondentes. Abaixo, uma página curta usa um bloco <style> interno para ver HTML e CSS num ficheiro. Sessões posteriores cobrem folhas externas e outras formas de adicionar CSS.

HTML com bloco style

html

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Demo</title>
<style>
body {
font-family: Georgia, serif;
background-color: #f5f7fb;
}
h1 {
color: #1a365d;
}
p {
color: #334155;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Styled with CSS</h1>
<p>This paragraph uses the p rule above.</p>
</body>
</html>

O que mudou

Sem as regras <style>, a página usa o aspeto predefinido do browser. Com CSS o fundo suaviza, o título fica azul-escuro e o parágrafo ganha espaçamento legível. Mesmo conteúdo HTML — apresentação diferente.

Porque «cascading» importa (pré-visualização)

«Cascading» em CSS significa que os estilos podem vir de vários sítios e o browser resolve qual regra vence com cascade e specificity. Ainda não precisa do algoritmo completo. Lembre a ideia: várias regras podem apontar ao mesmo elemento, e o CSS tem um sistema claro para o aspeto final. Sessões posteriores tornam isso prático.

Experimente você mesmo

Crie um ficheiro chamado intro.html.
Cole o exemplo HTML-com-style, guarde e abra no browser.
Mude color: #1a365d; na regra h1 para color: teal;, guarde e atualize.
Confirme a cor do título. Se nada mudar, verifique a gravação e o separador correto.

Erros comuns

Esperar que CSS crie a estrutura da página — use elementos HTML para títulos, listas e ligações; estilize-os com CSS
Escrever nomes de propriedade sem seletor ou chavetas, para o browser ignorar as declarações
Esquecer o ponto e vírgula após uma declaração, o que pode partir a propriedade seguinte na mesma regra
Colocar conteúdo visível só em CSS — CSS estiliza conteúdo; não substitui texto HTML

Resumo

CSS estiliza páginas HTML: cores, fontes, espaçamento, layout e apresentação
HTML estrutura o conteúdo; CSS controla como ele parece
Uma regra CSS junta um seletor a declarações propriedade/valor dentro de { }
Pode começar com um bloco <style> e depois passar a folhas externas
Cascading significa que várias regras podem aplicar; lições posteriores explicam qual vence
Pratique editando uma regra pequena e atualizando o browser

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓

Perguntas

🎯

70%

Para Passar

♾️

∞

Tempo

🔄

∞

Tentativas

📝 Instruções

Leia cada pergunta cuidadosamente
Selecione a melhor resposta para cada pergunta
Você pode refazer o quiz quantas vezes quiser
Seu progresso será mostrado no topo

Idioma