CSS Fundamentos

CSS: Estilizando a Web 🎨

CSS (Cascading Style Sheets) é o que torna as páginas bonitas!

🖌️ Como Aplicar CSS

<!-- 1. Inline (direto na tag) -->
<h1 style="color: blue;">Título Azul</h1>

<!-- 2. Na tag <style> -->
<style>
  h1 { color: blue; }
</style>

<!-- 3. Arquivo externo (MELHOR forma) -->
<link rel="stylesheet" href="estilo.css">

🎯 Seletores

/* Por tag (todas as <p>) */
p { color: gray; }

/* Por classe (elementos com class="destaque") */
.destaque { 
  font-weight: bold;
  color: red;
}

/* Por ID (elemento com id="titulo") */
#titulo { 
  font-size: 32px; 
}

📦 Box Model (Modelo de Caixa)

Todo elemento é uma "caixa" com 4 camadas:

┌─── margin (espaço externo) ───┐
│ ┌── border (borda) ──┐        │
│ │ ┌ padding (interno)┐│       │
│ │ │    CONTENT       ││       │
│ │ │   (conteúdo)     ││       │
│ │ └──────────────────┘│       │
│ └─────────────────────┘       │
└───────────────────────────────┘

.caixa {
  width: 200px;
  padding: 20px;    /* espaço interno */
  border: 2px solid black;
  margin: 10px;     /* espaço externo */
}

🎨 Cores em CSS

/* Várias formas de definir cores */
color: red;                    /* nome */
color: #FF5733;                /* hexadecimal */
color: rgb(255, 87, 51);       /* RGB */
color: hsl(14, 100%, 60%);     /* HSL */
color: rgba(255, 87, 51, 0.5); /* com transparência */

📏 Unidades

| Unidade | Tipo | Uso | |---------|------|-----| | px | Fixa | Bordas, detalhes | | % | Relativa | Largura responsiva | | rem | Relativa | Texto (baseado no root) | | vh/vw | Viewport | Tela cheia |