Bloco 1 · CSS fundamentos

O que é CSS

CSS (Cascading Style Sheets) define a apresentação do HTML.

selector {
  propriedade: valor;
}

.titulo {
  color: #4F46E5;
  font-size: 2rem;
}

Separa conteúdo (HTML) de aparência (CSS).

Selectores

As classes são a base de um CSS organizado.

Especificidade

A especificidade decide qual regra ganha em conflito:

inline (1000) > id (100) > classe (10) > tag (1)

• #menu .item (110) vence .item (10).
• !important força (evitar).

Manter especificidade baixa e plana facilita manutenção.

Box model

Cada elemento é uma caixa:

┌─ margin ───────────┐
│ ┌─ border ───────┐ │
│ │ ┌─ padding ──┐ │ │
│ │ │  content   │ │ │
│ │ └────────────┘ │ │
│ └────────────────┘ │
└────────────────────┘

box-sizing: border-box faz width incluir padding+border (recomendado).

Cascata e herança

• Cascata: várias regras aplicam-se por ordem (origem, especificidade, ordem).
• Herança: alguns valores passam aos filhos (ex: color, font).

body { font-family: sans-serif; }  /* herda para tudo */

Compreender ambas evita "porque é que isto não muda?".

Bloco 2 · Layout moderno

Flexbox

Flexbox alinha elementos numa direcção (linha ou coluna):

.barra {
  display: flex;
  justify-content: space-between; /* eixo principal */
  align-items: center;           /* eixo cruzado */
  gap: 1rem;
}

Ideal para componentes e alinhamentos 1D.

Propriedades flex

Grid

Grid organiza em duas dimensões (linhas e colunas):

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

Ideal para layouts de página e grelhas 2D.

Flexbox vs Grid

Costumam combinar-se: Grid para a página, Flex dentro dos blocos.

Bloco 3 · Responsive design

Mobile-first

Desenhar primeiro para o ecrã pequeno, depois acrescentar:

.card { width: 100%; }           /* mobile */

@media (min-width: 768px) {       /* tablet+ */
  .card { width: 50%; }
}

Base simples, melhorias progressivas.

Media queries

@media (min-width: 1024px) {
  .grelha { grid-template-columns: repeat(4, 1fr); }
}

Breakpoints típicos: ~480, 768, 1024, 1280 px. Definir conforme o conteúdo, não dispositivos específicos.

Unidades relativas

Preferir relativas a px para layouts flexíveis e acessíveis.

clamp() e fluidez

clamp(min, ideal, max) cria valores fluidos com limites:

.titulo {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

Tipografia e espaçamentos que escalam sozinhos — menos media queries.

Bloco 4 · CSS avançado

Custom properties (variáveis)

:root {
  --cor-primaria: #4F46E5;
  --espaco: 1rem;
}
.botao {
  background: var(--cor-primaria);
  padding: var(--espaco);
}

Reutilização, temas e manutenção num único ponto. Funcionam em tempo de execução (podem mudar com JS/media query).

calc()

Combina unidades diferentes em cálculos:

.coluna {
  width: calc(100% - 240px);  /* total menos sidebar */
}

Resolve layouts que misturam fixo e fluido.

Pseudo-elementos e pseudo-classes

.link::after { content: '→'; }     /* pseudo-elemento */
.item:hover { color: red; }        /* pseudo-classe */
.item:nth-child(2) { ... }

::before/::after criam conteúdo decorativo sem HTML extra.

Nesting

O CSS moderno suporta aninhamento nativo:

.card {
  padding: 1rem;
  & .titulo { font-weight: bold; }
  &:hover { box-shadow: 0 4px 12px #0002; }
}

Organiza regras relacionadas (como em Sass).

Bloco 5 · Metodologias e organização

Porquê metodologias

CSS cresce e fica caótico. As metodologias dão convenções para:

• Nomes previsíveis.
• Especificidade controlada.
• Componentes reutilizáveis.

BEM

BEM = Block, Element, Modifier:

.card { }              /* Block */
.card__titulo { }      /* Element */
.card--destaque { }    /* Modifier */

Nomes auto-explicativos, especificidade plana, sem conflitos.

Utility-first (Tailwind)

Classes utilitárias compõem o estilo no HTML:

<div class="flex items-center gap-4 p-4 rounded-lg shadow">

• Rápido, consistente, sem nomear tudo.
• HTML mais "carregado".

Filosofia oposta ao BEM; ambas válidas.

Arquitectura escalável

• Ordem: reset → base → layout → componentes → utilitários.
• Um ficheiro/secção por componente.
• Variáveis centralizadas.
• Especificidade baixa e consistente.

Pensar em sistemas, não páginas isoladas.

Bloco 6 · Pré-processadores e ferramentas

Sass

Sass estende o CSS com funcionalidades:

$primaria: #4F46E5;

.botao {
  background: $primaria;
  &:hover { background: darken($primaria, 10%); }
}

• Variáveis, nesting, mixins, funções.
• Compila para CSS normal.

Mixins e funções

@mixin flex-centro {
  display: flex;
  justify-content: center;
  align-items: center;
}
.caixa { @include flex-centro; }

Reutilizar blocos de estilo — menos repetição (DRY).

PostCSS

PostCSS transforma CSS com plugins:

• Autoprefixer: adiciona prefixos de browser.
• Minificação.
• Suporte a sintaxe futura.

Parte do build moderno de CSS.

DevTools

O inspector do browser é essencial:

• Ver e editar CSS ao vivo.
• Inspeccionar box model e cascata.
• Depurar layout (grid/flex overlays).
• Testar responsividade (device mode).