🎯 CSS Básico - Fundamentos

📘 Definição do CSS

CSS (Cascading Style Sheets) é uma linguagem que descreve como elementos HTML são apresentados.

💡 Benefícios:
✅ Separação de conteúdo e apresentação
✅ Facilita manutenção
✅ Melhor performance
✅ Reutilização de código

⚙️ Sintaxe Básica

/* Estrutura básica do CSS */ seletor { propriedade: valor; propriedade2: valor2; } /* Exemplo prático */ p { color: blue; font-size: 16px; text-align: center; }

Componentes da sintaxe:
🎯 Seletor: define QUAL elemento será estilizado
🔧 Propriedade: define O QUE será alterado
💎 Valor: define COMO será alterado

🎯 Seletores CSS

/* 1. SELETOR DE TAG */ p { color: white; } /* 2. SELETOR DE CLASSE */ .minha-classe { background: pink; } /* 3. SELETOR DE ID */ #meu-id { background: green; } /* 4. SELETOR UNIVERSAL */ * { margin: 0; padding: 0; } /* 5. AGRUPAMENTO DE SELETORES */ h1, h2, h3 { font-family: Arial; }

Seletor de CLASSE: .exemplo-classe { } - Seleciona elementos com class="exemplo-classe"

Seletor de ID: #exemplo-id { } - Seleciona elemento com id="exemplo-id"

Grupo 1 - Estilo compartilhado

Grupo 2 - Estilo compartilhado

Grupo 3 - Estilo compartilhado

📝 Formas de Aplicar CSS

1. CSS Inline

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

Uso: Estilos únicos em um elemento

2. CSS Interno

<head> <style> p { color: blue; } </style> </head>

Uso: Estilos para uma página específica

3. CSS Externo

Uso: Estilos para múltiplas páginas

🏆 Hierarquia e Especificidade

/* ORDEM DE PRIORIDADE (maior para menor): */ 1. CSS Inline: style="color: red" → 1000 pontos 2. IDs: #meuId → 100 pontos 3. Classes: .minhaClasse → 10 pontos 4. Tags: p, div, h1 → 1 ponto /* Em caso de empate, o ÚLTIMO código prevalece */

Este texto demonstra hierarquia: ID (#texto-id) tem prioridade sobre classe (.texto-classe)

Este texto usa CSS inline - TEM A MAIOR PRIORIDADE

🎯 Dica Important: Use !important apenas quando necessário, pois quebra a hierarquia natural!