Aula 05 de 10

Entrando no CSS

Conectar o CSS ao HTML, usar seletores, mudar cores, fontes e fundo de página.

<style> seletores color background font-size
// entendendo

Como funciona

O CSS fica dentro de uma tag <style> no <head>. Cada regra é: seletor (quem vai receber o estilo) + propriedade: valor;

Os seletores mais comuns:

  • h1 — seleciona todos os elementos h1
  • .nome-da-classe — seleciona elementos com class="nome-da-classe"
  • #meu-id — seleciona o elemento com id="meu-id"

A partir de agora os exercícios têm o HTML + CSS juntos. Escreva tudo em uma só caixa.

<style>
  h1 {
    color: tomato;
    font-size: 2rem;
  }
  body {
    background: #1a1a2e;
    color: white;
    font-family: sans-serif;
  }
</style>
<h1>Título colorido</h1>
// mão na massa

Agora é com você

Colorindo o texto

Escreva um <h1> e um <p>. No <style>, deixe o h1 laranja e o p cinza escuro. Mude também a fonte de h1 para sans-serif.

a5e1.html
Preciso de uma dica
No <style>: h1 { color: orange; font-family: sans-serif; } e p { color: #444; }
Observação: Cores no CSS podem ser nomes em inglês (red, blue, tomato), códigos hexadecimais (#FF5733) ou funções (rgb(255, 87, 51)).

Fundo de página

Crie uma página com fundo escuro (#0f172a), texto branco e um título colorido. Use a tag body no seletor para mudar o fundo todo.

a5e2.html
Preciso de uma dica
body { background: #0f172a; color: white; font-family: sans-serif; } — quando você estiliza o body, todos os elementos filhos herdam color e font-family.

Usando classes

Crie dois parágrafos. Um com class="destaque" e outro sem. No CSS, faça o .destaque ter cor diferente e font-weight: bold.

a5e3.html
Preciso de uma dica
No CSS, a classe começa com ponto: .destaque { color: orange; font-weight: bold; }
Observação: Classes são reutilizáveis — você pode colocar class="destaque" em qualquer elemento e ele receberá o mesmo estilo. Isso é mais poderoso do que estilizar a tag diretamente.
// desafio

reestilize a mini-bio

Pegue a mini-bio que você fez na aula 02 (nome, foto, parágrafo, link) e adicione CSS para deixá-la com sua personalidade: escolha as cores, o tamanho dos textos, a fonte. Sem limites.

a5d1.html DESAFIO
Aula 04 Aula 06