🎨 Semana 2 – CSS e Estilização

📑 Sumário da Aula
🎯 Tópico 1 - O que é CSS?

CSS significa Cascading Style Sheets, que em português quer dizer Folhas de Estilo em Cascata. Ele é uma linguagem usada para controlar a aparência visual de elementos escritos em HTML, como cores, tamanhos, espaçamentos, bordas, fontes, posicionamento dos elementos na tela e muito mais.

O HTML serve para estruturar o conteúdo de uma página (como títulos, parágrafos, listas, imagens), enquanto o CSS é o que define como esse conteúdo será exibido para o usuário.

Exemplo simples de diferença:

  • HTML: "Esse é um título"
  • CSS: "Esse título vai ter cor azul, tamanho 24px, alinhado ao centro"

CSS é essencial para deixar um site bonito, organizado e responsivo (adaptado para diferentes dispositivos).

📚 Por que o CSS é tão importante?

Você pode estar se perguntando: se o HTML já estrutura o conteúdo, por que precisamos do CSS? A resposta é simples: para ir além do básico e criar experiências de usuário que realmente engajam e funcionam em qualquer lugar.

O CSS é crucial por várias razões:

  • Estilo e Design Visual: Sem CSS, as páginas da web seriam monótonas, com textos pretos em fundos brancos, sem imagens bem posicionadas ou botões atraentes.
  • Experiência do Usuário (UX): Um bom design melhora a usabilidade, destaca informações importantes e torna a navegação intuitiva.
  • Responsividade: O CSS permite que o site se adapte automaticamente a celulares, tablets, laptops e desktops.
  • Manutenção e Consistência: Com o CSS, é possível alterar o estilo global do site editando um único arquivo.
  • Performance: Separar estilo de conteúdo ajuda o navegador a renderizar páginas mais rapidamente.

Em resumo, o CSS transforma um site simples em uma experiência interativa, moderna e funcional.

🧩 Onde o CSS Pode Ser Inserido no HTML?

Existem três maneiras principais de incluir estilos CSS em um documento HTML. Cada método tem suas vantagens:

1. CSS Externo (Recomendado)

Cria-se um arquivo separado com extensão .css e o vincula ao HTML com a tag <link>:

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

Exemplo de código no arquivo style.css:

h1 {
  color: navy;
  text-align: center;
}

p {
  font-family: Arial, sans-serif;
  font-size: 16px;
}
  • Organização: Mantém o HTML limpo e o CSS separado.
  • Reutilização: Pode ser utilizado em várias páginas.
  • Performance: Navegadores fazem cache do arquivo CSS.
2. CSS Interno (ou Incorporado)

É incluído dentro da tag <style> no <head> do documento HTML.

<style>
  h1 {
    color: green;
    text-decoration: underline;
  }

  p {
    color: #333;
    line-height: 1.5;
  }
</style>
  • Útil em páginas únicas.
  • Fácil de visualizar diretamente no HTML.
3. CSS Inline

Aplicado diretamente na tag HTML usando o atributo style. Exemplo:

<h1 style="color: purple; font-size: 30px;">Título</h1>
  • Alta prioridade: Sobrescreve outros estilos.
  • Útil para testes rápidos.

Desvantagens: Péssima organização, não reutilizável, e dificulta a manutenção.

Recomendação: Sempre que possível, prefira o uso de CSS externo.

📚 Tópico 2 - Seletores e Sintaxe

O CSS usa seletores para aplicar estilos a elementos HTML. A sintaxe básica é:


seletor {
  propriedade: valor;
}

Veja abaixo os principais tipos de seletores existentes no CSS:

🔹 1. Seletor de Tipo (Tag)

Seleciona todos os elementos de uma determinada tag HTML.

p {
  color: red;
}

🔸 Aplica a todos os parágrafos <p>.

🔹 2. Seletor de Classe

Seleciona elementos com um atributo class específico. Usa o ponto . antes do nome.

.destaque {
  background-color: yellow;
}

🔸 Aplica a todos os elementos com class="destaque".

🔹 3. Seletor de ID

Seleciona um elemento com um atributo id específico. Usa o símbolo #.

#titulo {
  font-size: 24px;
}

🔸 Aplica ao elemento com id="titulo".

🔹 4. Seletor Universal

Aplica estilos a todos os elementos da página.

* {
  margin: 0;
  padding: 0;
}

🔸 Muito usado para resetar estilos padrões do navegador.

🔹 5. Seletor de Agrupamento

Aplica o mesmo estilo a vários seletores.

h1, h2, h3 {
  font-family: Arial;
}

🔸 Aplica o estilo a todos os elementos citados.

🔹 6. Seletor de Descendente

Seleciona elementos que estão dentro de outros elementos.

article p {
  line-height: 1.5;
}

🔸 Aplica aos parágrafos <p> que estão dentro de um <article>.

🔹 7. Seletor de Filho Direto

Seleciona elementos que são filhos diretos de outro.

ul > li {
  list-style: none;
}

🔸 Aplica apenas aos <li> diretamente dentro de um <ul>.

🔹 8. Seletor de Irmão Adjacente

Seleciona um elemento que vem imediatamente após outro.

h1 + p {
  color: gray;
}

🔸 Aplica ao parágrafo logo após o <h1>.

🔹 9. Seletor de Irmãos Gerais

Seleciona todos os irmãos do mesmo nível que seguem um elemento.

h1 ~ p {
  font-style: italic;
}

🔸 Aplica a todos os <p> após o <h1> no mesmo nível do DOM.

🔹 10. Seletor de Atributo

Seleciona elementos com atributos específicos.

input[type="text"] {
  border: 1px solid #ccc;
}

🔸 Aplica aos <input> que têm type="text".

🔹 11. Pseudo-classes

Seleciona estados ou posições especiais de elementos.

a:hover {
  color: red;
}
  • :hover → ao passar o mouse
  • :first-child → primeiro filho
  • :nth-child(2) → segundo filho
  • :focus → quando um input é ativado
🔹 12. Pseudo-elementos

Permite aplicar estilo a partes específicas de um elemento.

p::first-line {
  font-weight: bold;
}
  • ::before → insere conteúdo antes do elemento
  • ::after → insere conteúdo depois do elemento
  • ::first-line → estiliza a primeira linha
  • ::first-letter → estiliza a primeira letra

Resumo: Os seletores CSS são ferramentas poderosas que permitem aplicar estilos com precisão. Saber usá-los corretamente é essencial para desenvolver páginas bem organizadas, elegantes e fáceis de manter.

🎨 Tópico 3 - Cores, Fontes e Tamanhos

O CSS permite deixar o conteúdo mais bonito, legível e atraente com o uso de cores, fontes, tamanhos e alinhamentos. Veja abaixo as principais propriedades:

  • color: define a cor do texto
  • background-color: define a cor de fundo
  • font-family: define o tipo de fonte
  • font-size: define o tamanho da fonte
  • text-align: define o alinhamento
🧪 Teste ao vivo (edite o CSS abaixo):

Olá, Mundo!

Este é um exemplo interativo de CSS aplicado ao texto.

🔸 Modifique o CSS acima e veja os efeitos somente na área abaixo, sem afetar o restante do site. 😄

📏 Tópico 4 - Margens, Padding e Borda
  • margin: espaçamento externo
  • padding: espaçamento interno
  • border: borda ao redor do elemento
Exemplo:

div {
  margin: 20px;
  padding: 10px;
  border: 2px solid black;
}
📦 Tópico 5 - Box Model

O modelo de caixa do CSS mostra como os elementos ocupam espaço:

Box Model

🔹 Content → conteúdo
🔹 Padding → espaçamento interno
🔹 Border → borda ao redor do elemento
🔹 Margin → espaçamento externo

🧩 Tópico 6 - Classes, IDs e Estilização Interna/Externa

Classes: aplicadas a vários elementos
<div class="alerta">Texto</div> → .alerta { color: red; }

IDs: únicos para um único elemento
<div id="menu"></div> → #menu { background: gray; }

📌 Formas de adicionar CSS:
  • Inline: <h1 style="color: red;">Título</h1>
  • Interno: dentro da tag <style> no <head>
  • Externo: usando um arquivo .css separado e linkado no HTML
<link rel="stylesheet" href="estilos.css">