Aula 09 - Introdução ao CSS 🖌️

Objetivo

Objetivo: Compreender o que é o CSS, como ele se diferencia do HTML e aprender os primeiros seletores para transformar o visual das suas páginas web.

1. O que é CSS? 🤔

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata).

HTML: Define o que o site tem (estrutura).
CSS: Define como o site aparece (estética).

💡 Analogia da Construção

HTML: É o tijolo, a viga e o cimento. { .fragment }
CSS: É a pintura, o piso e a decoração. { .fragment }

2. Sintaxe Básica 🧱

Um código CSS é composto por um Seletor e um Bloco de Declarações.

h1 {
    color: blue;
    font-size: 24px;
}

h1: O Seletor (quem queremos estilizar).
color: A Propriedade (o que queremos mudar).
blue: O Valor (como queremos que fique).

3. Formas de Aplicar CSS 📍

Existem três formas de inserir CSS em um projeto:

Inline: Direto na tag HTML (Evite!).

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

Interno: Dentro da tag <style> no <head>.
```
<style> h1 { color: green; } </style>
```
Externo: Em um arquivo separado .css (O melhor!).
```
<link rel="stylesheet" href="estilo.css">
```

4. Seletores Básicos 🎯

Para sermos específicos em quem queremos mudar:

Seletor de Tag: Aplica a todas as tags daquele tipo. (Ex: p { ... })
Seletor de Classe (.): Aplica a elementos com o atributo class. (Ex: .azul { ... }). Pode ser usado em vários elementos.
Seletor de ID (#): Aplica a um elemento único com o atributo id. (Ex: #topo { ... }). Use apenas um por página!

5. Visualizando a Cascata 📊

O termo Cascata significa que as regras se sobrepõem seguindo uma hierarquia.

graph TD
    EXT[Arquivo Externo] --> INT[Estilo Interno]
    INT --> INL[Estilo Inline]
    INL --> WIN[Elemento Final]

[!NOTE] Regras mais "próximas" ao elemento (como o Inline) geralmente vencem as regras mais distantes (como o Arquivo Externo).

6. Prática: Pintando o Site 🚀

Vamos criar o nosso primeiro arquivo de estilo no terminal:

$ touch index.html estilo.css
$ # No HTML, link o CSS:
$ # <link rel="stylesheet" href="estilo.css">
$ # No CSS, mude a cor do body:
$ # body { background-color: lightgrey; }

7. Mini-Projeto: Cartão de Visitas Colorido 👤

Crie um HTML com um título <h1> e um parágrafo <p>.
Crie um arquivo style.css.
No CSS, mude a cor do h1 para azul e o parágrafo para cinza.
Crie uma classe chamada .destaque no CSS com a cor de fundo amarela.
Aplique essa classe a uma palavra dentro do seu parágrafo.

8. Exercícios Progressivos 📝

Básicos

O que significa a sigla CSS?
Qual a diferença entre uma Propriedade e um Valor?

Intermediários

Por que usar um arquivo CSS externo é melhor do que usar o estilo inline?
Qual a diferença entre o seletor de Classe (.) e o seletor de ID (#)?

Desafio 🧠

Imagine que você tem um h1 com a cor vermelha definida no CSS externo e azul definida no estilo interno. Qual cor o navegador vai exibir? Por quê?

Próxima Aula: Vamos entender como os elementos ocupam espaço com o Box Model! 📦