🎨 AULA 1

Fundamentos CSS

Descubra o poder do CSS! Aprenda a sintaxe fundamental, seletores básicos e como dar vida visual aos seus documentos HTML.

⏱️ 50 min
🎯 Iniciante
🎨 Design Visual
💻 Hands-on

🎯 Objetivos de Aprendizagem

🎨 Compreender CSS

Entender o que é CSS, sua função e importância no desenvolvimento web

📝 Dominar a Sintaxe

Aprender a estrutura básica: seletores, propriedades e valores

🎯 Seletores Básicos

Usar seletores de elemento, classe e ID de forma eficiente

🔗 Conectar CSS ao HTML

Conhecer métodos de inclusão: inline, interno e externo

📚 O que é CSS?

CSS (Cascading Style Sheets) é a linguagem responsável pela apresentação visual dos documentos HTML. Enquanto o HTML define a estrutura e o conteúdo, o CSS define cores, layouts, tipografia e animações.

🎨 CSS = Beleza + Funcionalidade

CSS não é apenas sobre decoração. É sobre criar interfaces funcionais, acessíveis e responsivas que proporcionam excelente experiência ao usuário.

🔧 A Sintaxe Fundamental

Toda regra CSS segue este padrão básico:

Estrutura de uma Regra CSS

seletor {
    propriedade: valor;
    propriedade2: valor2;
}

🎯 Seletor

Define qual elemento será estilizado

🏷️ Propriedade

Define o que será alterado (cor, tamanho, etc.)

✨ Valor

Define como a propriedade será aplicada

🔧 Declaração

Conjunto completo propriedade: valor;

🎯 Seletores Básicos

1. 🏷️ Seletor de Elemento

Seleciona todos os elementos HTML do tipo especificado:

Estilizando Parágrafos

p {
    color: #333;
    font-size: 16px;
    line-height: 1.6;
}

2. 🆔 Seletor de ID

Seleciona um elemento único com ID específico (usa #):

Estilizando por ID

/* HTML: <h1 id="titulo-principal">Meu Título</h1> */
#titulo-principal {
    color: #2c3e50;
    font-size: 2.5em;
    text-align: center;
}

3. 🎯 Seletor de Classe

Seleciona elementos com classe específica (usa .):

Estilizando por Classe

/* HTML: <p class="destaque">Texto importante</p> */
.destaque {
    background-color: #fff3cd;
    padding: 15px;
    border-left: 4px solid #ffc107;
    font-weight: bold;
}

💡 Dica Importante

  • ID: Use para elementos únicos na página
  • Classe: Use para elementos que se repetem ou grupos
  • Elemento: Use para estilização global de tags HTML

🔗 Como Incluir CSS no HTML

1. 📄 CSS Externo (Recomendado)

<link rel="stylesheet" href="styles.css">

✅ Vantagens: Reutilizável, organizável, cacheable

2. 📝 CSS Interno

<style>
    body { font-family: Arial; }
</style>

⚠️ Uso: Páginas únicas ou estilos específicos

3. 🎨 CSS Inline

<p style="color: red;">Texto</p>

❌ Evitar: Dificulta manutenção e organização

💻 Exercício Prático

🎨 Criando seu primeiro CSS

Vamos criar uma página simples e estilizá-la com CSS!

📄 1. Crie o arquivo HTML (index.html)

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Primeira Página com CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 id="titulo">Bem-vindo ao CSS!</h1>
    <p class="introducao">Este é meu primeiro parágrafo estilizado.</p>
    <p>Este é um parágrafo normal.</p>
    <div class="caixa-destaque">
        <h2>CSS é Incrível!</h2>
        <p>Com CSS posso criar designs profissionais.</p>
    </div>
</body>
</html>

🎨 2. Crie o arquivo CSS (styles.css)

/* Estilo global para o body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

/* Estilo para o título principal */
#titulo {
    color: #2c3e50;
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
}

/* Estilo para parágrafo de introdução */
.introducao {
    font-size: 1.2em;
    color: #34495e;
    background-color: #ecf0f1;
    padding: 15px;
    border-radius: 5px;
}

/* Estilo para todos os parágrafos */
p {
    color: #555;
    margin-bottom: 15px;
}

/* Estilo para a caixa de destaque */
.caixa-destaque {
    background-color: #3498db;
    color: white;
    padding: 20px;
    border-radius: 10px;
    margin-top: 30px;
}

.caixa-destaque h2 {
    margin-top: 0;
    color: #ecf0f1;
}

✅ Checklist do Exercício

💡 Dicas e Melhores Práticas

📋 Organização

  • Sempre use CSS externo
  • Organize estilos por seções
  • Use comentários descritivos
  • Mantenha consistência na nomenclatura

🎯 Seletores

  • Prefira classes a IDs
  • Use nomes semânticos e descritivos
  • Evite seletores muito específicos
  • Mantenha simplicidade

🔧 Código Limpo

  • Indentação consistente
  • Uma propriedade por linha
  • Espaços após dois pontos
  • Ordem lógica das propriedades

🚀 Performance

  • Evite !important
  • Minimize CSS não utilizado
  • Use shorthand properties
  • Otimize seletores complexos

🏆 Desafio Extra

🎨 Crie seu Cartão Pessoal

Usando apenas HTML e CSS, crie um cartão pessoal com:

  • Seu nome em destaque
  • Uma cor de fundo interessante
  • Informações pessoais estilizadas
  • Bordas arredondadas
  • Sombra sutil

💡 Dica: Explore propriedades como border-radius, box-shadow e text-shadow!

📚 Recursos para Aprofundamento

Recurso Descrição Nível Link
MDN CSS Reference Documentação oficial completa Iniciante+ Acessar
CSS-Tricks Tutoriais e dicas práticas Todos Acessar
CodePen Experimente CSS online Prático Acessar
Can I Use Compatibilidade de propriedades Referência Acessar