Pular para conteúdo

Aula 09 - Introdução ao CSS 🖌️

Dando Cor e Vida à Estrutura

👋 Olá!

Até agora, nossos sites eram apenas "esqueletos" brancos e pretos.

Hoje, vamos aprender a pintar e decorar a Web! 🎨

Agenda de Hoje 📅

  1. O que é CSS?
  2. Sintaxe (Regras)
  3. Onde escrever CSS?
  4. Seletores de Tag, Classe e ID
  5. Propriedades Iniciais
  6. O Conceito de Cascata

🖌️ 1. O que é CSS?

  • Cascading Style Sheets.
  • É uma linguagem de Estilo.
  • HTML = O que o site TEM.
  • CSS = Como o site PARECE.

🏗️ Analogia do Carro

  • HTML: Chassi, motor, rodas.
  • CSS: Cor da pintura, estofado, design dos faróis.

🧱 2. Sintaxe Básica

Como escrevemos CSS?

A Regra CSS 📜

seletor {
  propriedade: valor;
}
- Seletor: Escolhe o elemento HTML. - Propriedade: O que mudar (cor, tamanho). - Valor: O resultado desejado.

📍 3. Onde Colocar o CSS?

Inline Style ❌

  • Direto no elemento. 
    <p style="color: blue;">Texto</p>
  • Difícil de manter. Evite!

Internal Style 📂

  • No topo do HTML (<style>).
  • Bom para testes rápidos.

External Style ✅

  • Arquivo separado .css.
  • O padrão da indústria. 
<link rel="stylesheet" href="style.css">

🎯 4. Seletores Básicos

Como selecionar quem mudar?

Por Tag 🏷️

  • Seleciona todas as tags iguais.
p { color: grey; }

Por Classe ( . ) 👥

  • Seleciona elementos com a mesma class.
.azul { color: blue; }

Por ID ( # ) 👤

  • Seleciona um único elemento específico.
#logo { width: 100px; }

📊 Hierarquia de Seletores

graph TD
    TAG[Tag - Geral] --> CLASS[Classe - Grupo]
    CLASS --> ID[ID - Único/Específico]

🌊 5. O Conceito de Cascata

  • As regras são lidas de cima para baixo.
  • Regras mais específicas vencem as gerais.
  • O último estilo lido geralmente é o que fica.

🌈 6. Primeiras Cores

  • color: Muda a cor do texto.
  • background-color: Muda o fundo. 
body {
  background-color: lightblue;
  color: navy;
}

💻 7. Prática Inicial

  1. Criar style.css.
  2. Conectar ao HTML.
  3. Mudar o fundo do site.
  4. Colorir os parágrafos.

Resumo da Aula ✅

  • CSS = Estilo.
  • Seletor { Propriedade: Valor }.
  • Use arquivos externos.
  • Classes para grupos, IDs para um.

Próxima Aula 📦

Box Model

Vamos entender como as caixas se comportam na tela!

Dúvidas? 🤔

"O design não é apenas o que parece e o que se sente. O design é como funciona."