BananaMaster

4 Como Usar CSS no HTML: Guia Passo a Passo (HTML e CSS, Front End)

Se esqueceu algo, clique para ir à aula

📘 Tarefas Práticas de Estilização CSS

Para cada tarefa, crie uma classe separada em style.css e aplique-a na tag HTML correta.

📌 Estrutura de arquivos: index.html + style.css

✏️ Tarefa 1

Reproduza o estilo deste texto:

Hello World

• Cor do texto: red
• Tamanho da fonte: 20px

✏️ Tarefa 2

Reproduza o estilo deste texto:

My Name

• Cor do texto: #2bcd84
• Peso da fonte: 700

✏️ Tarefa 3

Reproduza o estilo deste texto:

I love coding

• Fonte: "Courier New", Courier, monospace
• Tamanho da fonte: 24px
• Cor do texto: #f0a830

✏️ Tarefa 4

Reproduza o estilo deste texto:

Frontend Developer

• Cor do texto: blue
• Tamanho da fonte: 34px
• Peso da fonte: 300

✏️ Tarefa 5

Reproduza o estilo deste texto:

CSS is cool

• Cor do texto: #5bc4f5
• Fonte: Georgia, serif
• Tamanho da fonte: 20px

✏️ Tarefa 6

Reproduza o estilo deste texto:

JavaScript

• Cor do texto: white
• Tamanho da fonte: 18px
• Peso da fonte: 600

✏️ Tarefa 7

Reproduza o estilo deste texto:

Rockstar Games

• Cor do texto: #ff6b6b
• Tamanho da fonte: 50px
• Fonte: "Courier New", Courier, monospace
• Peso da fonte: 900

✏️ Tarefa 8

Reproduza o estilo deste texto:

Small and light

• Cor do texto: #888
• Tamanho da fonte: 15px
• Peso da fonte: 100

✏️ Tarefa 9

Reproduza o estilo deste texto:

GTA 6 is coming

• Cor do texto: #b89ef8
• Fonte: Impact, fantasy
• Tamanho da fonte: 36px
• Peso da fonte: 400

✏️ Tarefa 10 — 🔥 Bônus

Crie o seu próprio! Crie uma classe .my-style e aplique-a em qualquer tag.

Text

• Escolha sua própria cor de texto
• Escolha seu próprio tamanho de fonte
• Escolha seu próprio peso de fonte
• Escolha sua própria fonte

📌 Importante:
Cada classe é escrita separadamente em style.css.
Use apenas HTML e CSS.
JavaScript não é necessário.
Pratique as propriedades: color, font-size, font-weight, font-family.