CSS - Cascading Style Sheets

O CSS é a linguagem usada para dar estilo e beleza às suas páginas web!

O que é CSS?

CSS (Cascading Style Sheets) é a linguagem usada para descrever como os elementos HTML devem ser exibidos. Se o HTML é o esqueleto, o CSS é a roupa, o penteado e a maquiagem!

/* Este é um comentário CSS */
p {
  color: blue;
  font-size: 16px;
  text-align: center;
}

Conceitos Fundamentais

Cores

Defina cores para texto, fundos e bordas usando nomes, códigos hex ou RGB.

p {
  color: red;           /* Nome da cor */
  background: #ff0000;    /* Código hexadecimal */
  border: 2px solid rgb(255, 0, 0); /* RGB */
}

Fontes e Texto

Controle o tamanho, estilo e família das fontes do seu texto.

h1 {
  font-family: Arial, sans-serif;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

Espaçamento

Use margin (espaço externo) e padding (espaço interno) para organizar elementos.

div {
  margin: 20px;      /* Espaço externo */
  padding: 15px;     /* Espaço interno */
  border: 1px solid black;
}

Layout com Display

Controla como os elementos são exibidos: block, inline, inline-block, flex, grid.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Pseudo-classes

Estilize elementos em diferentes estados como hover, focus, active.

a:hover {
  color: red;
  text-decoration: underline;
}

button:active {
  background: darkblue;
}

Responsividade

Use media queries para adaptar seu site a diferentes tamanhos de tela.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
    padding: 10px;
  }
}

Seletores CSS

Os seletores determinam quais elementos serão estilizados:

Seletor de Elemento

p { color: blue; } /* Todas as tags p */

Seletor de Classe

.destaque { background: yellow; }

Seletor de ID

#cabecalho { font-size: 24px; }

Exercício Prático

Estilize sua Página HTML

Agora que você já tem uma página HTML, vamos adicionar estilo:

Crie um novo arquivo chamado estilo.css
Copie o código CSS abaixo
Adicione <link rel="stylesheet" href="estilo.css"> no <head> do seu HTML
Modifique as cores e tamanhos como quiser!

/* estilo.css */
body {
  font-family: Arial, sans-serif;
  background: #f0f0f0;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #333;
  text-align: center;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

p {
  color: #666;
  line-height: 1.6;
}

Dicas de CSS

Comece simples: Comece com cores e tamanhos básicos
Use classes: São mais flexíveis que IDs
Teste no navegador: Use as ferramentas de desenvolvedor (F12)
Organize seu CSS: Agrupe propriedades relacionadas
Use comentários: /* isto é um comentário */