1. Fundamentos do CSS

O que é CSS?

O CSS (Cascading Style Sheets) controla a apresentação visual do HTML. Ele define como os elementos da página devem ser exibidos — cores, espaçamentos, posicionamento, responsividade e até animações.

Formas de aplicar CSS:

1. Inline (dentro da tag HTML) – ideal para testes rápidos<h1 style="color: red;">Olá Mundo</h1>
2. Interno (dentro de <style>) – útil para páginas pequenas<style> h1 { color: red; } </style>
3. Externo – separa HTML e CSS, mais profissional<link rel="stylesheet" href="styles.css">

🔍 2. Seletores e Especificidade

Tipos de seletores:

• Tipo (tag) → p { }
• Classe → .botao { }
• ID → #menu { }
• Atributo → input[type="text"] { }
• Combinadores (descendente, filho, irmão) → ul li, div > p, h1 + p


Especificidade:

Cada seletor tem uma força diferente. Exemplo de força:

• Inline: 1000
• ID: 100
• Classe: 10
• Elemento: 1


📐 3. Box Model e Layouts

O Box Model define como cada elemento é renderizado:

[ margin ]
[ border ]
[ padding ]
[ conteúdo ]

Propriedades importantes:

• width, height, margin, padding, border
• box-sizing: border-box (inclui padding e border no tamanho total)

Flexbox:

Modelo de layout moderno para elementos em linha.

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

Grid:

Ideal para layouts bidimensionais.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

🎨 4. Estilizando com Criatividade

Tipografia:

body {
  font-family: 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Cores e Degradês:

.background {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
}

Sombreamentos e Transições:

.box {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.box:hover {
  transform: scale(1.05);
}

📱 5. Responsividade

Media Queries:

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

Unidades relativas:

• em, rem, %, vw, vh para adaptar tamanhos a diferentes telas.
  

✨ 6. Pseudo-classes e Animações

Pseudo-classes:

a:hover {
  color: red;
}
input:focus {
  border-color: blue;
}

Animações com @keyframes:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.elemento {
  animation: fadeIn 1s ease-in-out;
}

⚙️ 7. CSS Avançado

Variáveis:

:root {
  --cor-principal: #3498db;
}
h2 {
  color: var(--cor-principal);
}

CSS Custom Properties + JavaScript:

CSS pode ser dinâmico com interação do JavaScript — útil para temas escuros, animações controladas, etc.

Estrutura BEM:

Uma convenção para nomear classes:

.card__imagem--grande {
  /* bloco__elemento--modificador */
}

📦 8. Boas Práticas e Dicas Finais

• Separe estilos em componentes reutilizáveis.
• Use reset.css ou normalize.css para garantir consistência entre navegadores.
• Prefira classes a ids para reaproveitamento de código.
• Utilize pré-processadores como SASS ou LESS para projetos complexos.
  

Bônus: Animações com @keyframes: Movimento e Vida no CSS

As animações CSS são criadas com duas partes:

1. @keyframes: define os estágios da animação
2. Propriedades CSS de animação: aplicadas ao elemento

Exemplo básico de animação de desvanecimento:

@keyframes fadeIn {  
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.elemento {
  animation: fadeIn 1s ease-in;
}

Exemplo com múltiplos estágios:

@keyframes pular {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(0); }
}
.bola {
  animation: pular 0.5s ease-in-out infinite;
}

Propriedades de animação:

• animation-name: nome do @keyframes
• animation-duration: duração (ex: 2s)
• animation-timing-function: ease, linear, ease-in-out, etc.
• animation-delay: atraso antes de começar
• animation-iteration-count: número de repetições ou infinite
• animation-direction: normal, reverse, alternate, alternate-reverse
• animation-fill-mode: define estado antes/depois da animação


🧠 Media Queries Avançadas: Domine a Responsividade

As media queries são a base do design responsivo. Elas permitem aplicar estilos com base no tamanho da tela ou dispositivo.

Sintaxe básica:

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

Exemplos mais avançados:

Modo retrato vs paisagem:

@media (orientation: landscape) {
  body {
    background-color: #f0f0f0;
  }
}

Resolução de tela:

@media (min-resolution: 192dpi) {
  img.hd {
    display: block;
  }
}

Intervalos com min-width e max-width:

@media (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 2rem;
  }
}

Variação de tema escuro:

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
}

🎯 Conclusão

Com CSS, você não estiliza apenas elementos, mas molda experiências. Ele pode parecer desafiador no começo, mas com a prática, você constrói desde sites simples até interfaces modernas com efeitos visuais impressionantes.