1. Anatomia de uma Regra
O CSS funciona como uma lista de instruções. Cada instrução define quem será afetado e qual será a mudança.
h1 {
color: blue;
font-size: 32px;
}
color: blue;
font-size: 32px;
}
2. Tipos de Seletores
Afeta todos os elementos do mesmo tipo.
p { color: gray; }Funciona como um uniforme para vários elementos.
.destaque { color: blue; }Funciona como um CPF, único para um elemento.
#topo { height: 100px; }Seleciona um elemento que está dentro de outro.
footer p { font-size: 12px; }Aplica nos parágrafos que moram no rodapé.
Seleciona uma tag específica que possua uma classe.
p.aviso { color: red; }Aplica apenas nos parágrafos que usam a classe "aviso".
Pulo do Gato: Note que na seleção descendente existe um espaço entre
os nomes (
footer p). Já na seleção por Tag+Classe, os nomes ficam juntos
(p.aviso). Essa diferença muda tudo para o navegador!
3. Laboratório Interativo
Altere os valores abaixo e veja como o código CSS é gerado automaticamente.
Texto de Exemplo
.texto {
font-size: 24px;
font-weight: 400;
}
.caixa {
border-radius: 0px;
border-width: 2px;
}
Cor de Fundo
.fundo {
background-color: rgba(99, 102, 241, 1);
}
1
2
3
.container {
display: flex;
justify-content: center;
}