Guia Completo de CSS – Do Básico ao Avançado

1️⃣ Introdução ao CSS

CSS, ou Cascading Style Sheets, é a linguagem que permite estilizar páginas web. Enquanto o HTML cria a estrutura do site e o JavaScript adiciona interatividade, o CSS define cores, fontes, espaçamento, layouts e animações. Ele é essencial para que seu site não pareça um documento simples de texto.

Historicamente, o CSS surgiu em 1996 com o objetivo de separar conteúdo da apresentação. Antes disso, tudo era definido diretamente no HTML, dificultando manutenção e escalabilidade. Hoje, um bom domínio de CSS é fundamental para qualquer desenvolvedor web, pois possibilita criar interfaces modernas, responsivas e atraentes.

Além disso, o CSS evoluiu muito com recursos como Flexbox, Grid, variáveis CSS e transições animadas, permitindo que designs complexos sejam implementados de maneira mais fácil e organizada.

Aprender CSS é também aprender a pensar em layout, hierarquia visual e experiência do usuário, tornando você um desenvolvedor mais completo.

2️⃣ Seletores CSS

Seletores são a base do CSS. Eles permitem escolher elementos específicos do HTML para aplicar estilos. Sem seletores, o CSS não faria sentido.

2.1 Seletores básicos

Elemento: seleciona todos os elementos de um tipo específico.

p {
  color: blue;
}
Quando tem um . mais o nome do seletor é class o aquivo tem que estar asssim : <div class="aprender">Tudo que mudar no css muda aqui dentro dessa div</div>
.aprender{
  border: 1px solid black;
}

ID: seleciona um elemento único.
representando pela famosa hastag # 
Exemplo : #header {
  background-color: gray;
}   o header vai estar asssim <div id='header'></div>

2.2 Seletores combinadores

Descendente: seleciona elementos dentro de outro elemento.

div p {
  color: red;
}

Filho direto: apenas filhos imediatos.

ul > li {
  list-style: none;
}

Irmão adjacente: seleciona o próximo elemento do mesmo nível.

h1 + p {
  font-size: 18px;
}

Irmão geral: todos os elementos seguintes do mesmo tipo.

h1 ~ p {
  color: green;
}

2.3 Pseudo-classes

Pseudo-classes permitem estilizar elementos em determinados estados.

:hover → quando o mouse passa por cima
:focus → quando um campo de formulário está ativo
:nth-child() → seleciona filhos específicos

button:hover {
  background-color: darkblue;
}
li:nth-child(odd) {
  background-color: #f0f0f0;
}

2.4 Pseudo-elementos

Pseudo-elementos permitem criar ou estilizar partes de elementos:

::before → adiciona conteúdo antes do elemento
::after → adiciona conteúdo depois

p::before {
  content: "▶ ";
  color: red;
}

2.5 Seletores de atributo

Selecionam elementos com base em atributos HTML.

input[type="text"] {
  border: 1px solid gray;
}
a[href^="https"] {
  color: green;
}

3️⃣ Cores, Fontes e Texto

3.1 Cores

Existem várias maneiras de definir cores no CSS:

Nomes de cores: red, blue, green
HEX: #ff0000, #00ff00
RGB: rgb(255, 0, 0)
HSL: hsl(0, 100%, 50%)

Você também pode criar variáveis CSS para cores:

:root {
  --primary-color: #3498db;
}
body {
  background-color: var(--primary-color);
}

3.2 Fontes

Controlam a tipografia do site:

font-family define a família da fonte
font-size define o tamanho do texto
font-weight define a espessura
font-style define itálico ou normal

h1 {
  font-family: 'Arial', sans-serif;
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
}

3.3 Efeitos de texto

text-align: left, center, right
line-height: espaçamento entre linhas
letter-spacing: espaçamento entre letras
text-transform: uppercase, lowercase, capitalize
text-decoration: underline, line-through
text-shadow: sombra no texto

h2 {
  text-align: center;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px gray;
}

4️⃣ Box Model e Espaçamento

O box model é o conceito central do CSS. Cada elemento é uma caixa com:

Content (conteúdo) – o texto ou imagem dentro
Padding (preenchimento interno) – espaço entre o conteúdo e a borda
Border (borda) – a linha ao redor do elemento
Margin (margem) – espaço fora da borda

div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

4.1 Overflow

Controla o que acontece quando o conteúdo é maior que a caixa:

visible → padrão, mostra tudo
hidden → corta o excesso
scroll → adiciona barras de rolagem
auto → rolagem só se necessário

5️⃣ Flexbox

O Flexbox é usado para criar layouts flexíveis.

.container {
  display: flex;
  flex-direction: row; /* row | column */
  justify-content: center; /* alinhamento horizontal */
  align-items: center; /* alinhamento vertical */
}

Propriedades do container

flex-wrap: wrap | nowrap | wrap-reverse
justify-content: flex-start, center, space-between, space-around, space-evenly
align-items: flex-start, center, flex-end, stretch

Propriedades do item

order: define a ordem
flex-grow: aumenta proporcionalmente
flex-shrink: encolhe proporcionalmente
flex-basis: tamanho inicial
align-self: sobrescreve o align-items do container

💡 Exemplo prático: centralizar um card no meio da página:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

6️⃣ Grid Layout

O CSS Grid permite criar layouts bidimensionais.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px;
  gap: 10px;
}

Propriedades principais

grid-template-columns e grid-template-rows
gap → espaçamento entre linhas e colunas
justify-items e align-items → alinhamento dos itens
grid-area → nomear regiões para posicionamento fácil

💡 Exemplo: galeria de fotos responsiva

.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
}

7️⃣ Posicionamento e Z-Index

O position define como o elemento é posicionado:

static → padrão, segue o fluxo
relative → posição relativa ao normal
absolute → relativo ao pai posicionado
fixed → fixo na tela
sticky → fixa após rolagem

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000; /* sobreposição */
}

8️⃣ Backgrounds, Imagens e Gradientes

8.1 Backgrounds

body {
  background-color: #f5f5f5;
  background-image: url('fundo.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

8.2 Gradientes

Linear:

LINEAR:
background: linear-gradient(to right, red, yellow);
RADIAL:
background: radial-gradient(circle, blue, white);

Transições, Transformações e Animações

9.1 Transições

button {
  transition: background 0.3s, transform 0.3s;
}
button:hover {
  background: green;
  transform: scale(1.1);
}

9.2 Transformações

translate(x, y) → mover
rotate(deg) → girar
scale(x, y) → redimensionar
skew(x, y) → inclinar

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.ball {
  animation: bounce 2s infinite;
}

🔟 Responsividade e Media Queries

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

Adapte layouts usando Flex + Grid Crie menus mobile Ajuste fontes, imagens e cards

11️⃣ Boas práticas e dicas avançadas

Organize CSS com BEM ou SMACSS
Use variáveis CSS para cores e medidas
Combine clamp(), min(), max() e calc() para responsividade
Prefira transforms e opacity em animações para performance

12️⃣ Conclusão e próximos passos

Aprender CSS é praticar layouts, cores, tipografia e animações. Comece com Flex e Grid, depois explore pseudo-classes, animações e responsividade.

Pratique, crie projetos reais, experimente cores e fontes. CSS é tanto sobre técnica quanto sobre criatividade!

Salve este guia e volte sempre para revisá-lo. Em pouco tempo, você vai se sentir confortável criando sites modernos e bonitos.