Conceitos de CSS — Lucilia's Notebook

Sintaxe do CSS

🎯 Seletor + Propriedade + Valor

Uma regra CSS é formada por um seletor (quem vai receber o estilo), uma propriedade (o que vai mudar) e um valor (para quanto vai mudar). Simples assim.

/*  seletor  {  propriedade  :  valor  ;  }  */

p {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
}

.destaque {           /* seletor de classe */
  background-color: yellow;
  font-weight: bold;
}

#titulo-principal {   /* seletor de ID */
  font-size: 2rem;
  color: #1a1a1a;
}

Tipos de seletores

Seletores básicos

p — por tag (todos os <p>)
.classe — por classe (começa com ponto)
#id — por ID (começa com #)
* — universal (tudo)

Seletores combinados

div p — descendente (p dentro de div)
div > p — filho direto
h1, h2 — múltiplos (h1 e h2)
a:hover — pseudo-classe (estado)
p::first-line — pseudo-elemento

/* Exemplos de seletores */
h1, h2, h3   { font-family: serif; }   /* múltiplos */
nav a        { color: white; }         /* descendente */
button:hover { background: #eee; }     /* estado hover */
input:focus  { outline: 2px solid blue; } /* foco */
p::first-letter { font-size: 2em; }   /* primeira letra */
li:nth-child(2) { color: red; }       /* segundo item */

O Box Model — tudo é uma caixa

📦 O conceito mais importante do CSS

No CSS, todo elemento é uma caixa retangular. Essa caixa tem quatro camadas: o conteúdo, o padding (espaço interno), a borda e a margem (espaço externo). Entender o Box Model é fundamental para controlar espaçamento e layout.

margin (espaço externo)

border (borda)

padding (espaço interno)

conteúdo

.card {
  width: 300px;            /* largura do conteúdo */
  padding: 20px;           /* espaço interno */
  border: 2px solid #333;  /* borda */
  margin: 16px;            /* espaço externo */
  box-sizing: border-box;  /* padding dentro da largura */
}

Especificidade — quem ganha o conflito?

⚖️ A hierarquia do CSS

Quando duas regras tentam estilizar o mesmo elemento, o CSS usa a especificidade para decidir qual prevalece. Quanto mais específico o seletor, maior seu peso. Em caso de empate, a regra que aparece por último no código vence.

!important color: red !important

Inline style style="color:red"

ID #titulo { ... }

Classe / pseudo .btn:hover { ... }

Tag p { ... }

Propriedades essenciais

color / background

Cores

Aceita nome (red), hex (#ff0000), RGB (rgb(255,0,0)) ou HSL. background controla o fundo, color o texto.

font-size / font-family

Tipografia

Controla tamanho, família, peso (font-weight) e estilo (font-style) do texto. Use rem para tamanhos relativos à raiz.

display

Display

block ocupa linha inteira. inline flui com o texto. flex e grid ativam os sistemas de layout modernos.

flexbox

Flexbox

Ativa com display: flex. Controla alinhamento com justify-content (eixo principal) e align-items (eixo cruzado).

grid

CSS Grid

Ativa com display: grid. Cria layouts em duas dimensões. grid-template-columns define as colunas, gap o espaçamento.

--variavel

Variáveis CSS

Declare com --nome: valor no :root. Use com var(--nome). Facilitam temas, modo escuro e manutenção.

/* Variáveis CSS + Flexbox + Grid */
:root {
  --cor-primaria: #2563a8;
  --espacamento: 1rem;
}

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

.card {
  display: flex;
  align-items: center;
  background: var(--cor-primaria);
  border-radius: 8px;
  padding: var(--espacamento);
  transition: transform .2s;
}

.card:hover { transform: translateY(-4px); }

Media Queries — responsividade

📱 Adaptando para qualquer tela

Media queries aplicam estilos condicionalmente — geralmente baseadas no tamanho da tela. A abordagem mobile-first é a recomendada: começa pelo mobile e vai adicionando estilos para telas maiores.

/* Mobile first — começa pelo menor */
.grid {
  grid-template-columns: 1fr;      /* 1 coluna no mobile */
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Preferência de modo escuro */
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}