Capítulo 11: A Tinta dos Escribas (Introdução ao CSS) 🎨✍️
Neste capítulo, vamos finalmente entrar no mundo do CSS e aprender como mudar a cor e o estilo das nossas tags HTML, usando o tema Pintura de Estandartes!
📖 O que é CSS?
Como vimos no início, o CSS é o que dá beleza ao esqueleto do HTML. Ele funciona através de regras. Nós dizemos qual elemento queremos mudar e o que queremos mudar nele.
A forma mais organizada de usar CSS é criando um arquivo separado (com a extensão .css) e linkando ele no nosso HTML!
📖 Exemplo Guiado: Pintando o Título
Vamos criar um arquivo HTML e um arquivo CSS.
- Crie o arquivo
index.html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Meu Castelo Colorido</title>
<!-- Link para o arquivo CSS -->
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Título Azul</h1>
<p>Este parágrafo será verde.</p>
</body>
</html>- Crie o arquivo
estilo.cssna mesma pasta:
/* Seleciona a tag h1 e muda a cor */
h1 {
color: blue;
}
/* Seleciona a tag p e muda a cor */
p {
color: green;
}📊 Ilustração Visual: Regra CSS
graph TD A[Seletor: h1] --> B["{ Propriedade: color; Valor: blue; }"]
🛠️ Prática Obrigatória 1: Seu Primeiro Estilo
Crie um arquivo chamado meu_estilo.html e um meu_estilo.css. No HTML, coloque um título <h1> e linke o CSS. No CSS, faça o título ficar com a cor vermelha (red).
🔑 Gabarito de Código
Prática 1: meu_estilo.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Prática CSS</title>
<link rel="stylesheet" href="meu_estilo.css">
</head>
<body>
<h1>Texto Vermelho</h1>
</body>
</html>meu_estilo.css
h1 {
color: red;
}📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)
- Faça o Commit: No GitHub Desktop, digite a mensagem (ex:
Finaliza Capítulo X) e clique em Commit to main. - Envie para a Nuvem (Push): Clique em Push origin.
- ⚠️ IMPORTANTE: Seu repositório DEVE SER PÚBLICO.
- No Microsoft Teams:
- Copie o link do seu repositório.
- Cole na tarefa correspondente no Teams.
- Clique em Entregar.