Seletores, propriedades e o mecanismo de cascata.
lightbulb Um mesmo arquivo CSS pode estilizar múltiplas páginas HTML, garantindo consistência visual.
Sem CSS
Com CSS
<p style="color: red;
font-size: 18px;">
Texto vermelho
</p>
Mistura estilo com conteúdo. Difícil de manter.
<head>
<style>
p {
color: red;
}
</style>
</head>
Funciona, mas só para uma página. Bom para protótipos.
<!-- No HTML: -->
<link
rel="stylesheet"
href="css/style.css"
/>
/* No arquivo style.css: */
p {
color: red;
}
Reutilizável, organizado e cacheável.
h1 {
color: #6366f1;
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
}
h1)
color)
#6366f1)
;
/* Por tag (elemento) */
p { color: blue; }
/* Por classe (.) */
.destaque { color: red; }
/* Por ID (#) */
#titulo { color: green; }
/* Universal (*) */
* { margin: 0; }
<!-- Classe (reutilizável) -->
<p class="destaque">Texto</p>
<!-- ID (único na página) -->
<h1 id="titulo">Título</h1>
<!-- Múltiplas classes -->
<div class="card destaque">
Conteúdo
</div>
lightbulb Prefira classes ao invés de IDs para estilização. IDs são mais indicados para JavaScript.
/* Descendente (dentro de) */
article p { color: gray; }
/* Filho direto */
nav > ul { list-style: none; }
/* Múltiplos seletores */
h1, h2, h3 { font-weight: bold; }
/* Classe + tag */
p.intro { font-size: 1.2rem; }
/* Ao passar o mouse */
a:hover { color: purple; }
/* Ao clicar */
button:active { opacity: 0.8; }
/* Ao receber foco */
input:focus {
border-color: blue;
}
/* Primeiro e último filho */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }
color cor do textofont-size tamanhofont-weight peso (negrito)font-family fontetext-align alinhamentotext-decoration sublinhado, etc.line-height espaço entre linhasbackground-color cor de fundobackground-image imagem de fundoopacity transparênciaFormatos de cor:
red nome#ff0000 hexadecimalrgb(255,0,0) RGBhsl(0,100%,50%) HSLmargin espaço externopadding espaço internoborder bordaborder-radius arredondamentowidth larguraheight alturamax-width largura máximapx (pixels)
Valor fixo. Não se adapta ao tamanho da tela.
pt (pontos)
Usado em impressão. Evitar na web.
rem
Relativo ao font-size do <html>
(padrão 16px)
em
Relativo ao font-size do elemento pai
%
Porcentagem do elemento pai
vw / vh
Porcentagem da largura / altura da tela
!important (evitar!)
style="")
#titulo)
.destaque)
p)
p { color: blue; }
.destaque { color: red; }
#intro { color: green; }
Para <p id="intro" class="destaque">
Resultado: verde (ID vence)
lightbulb Em caso de empate na especificidade, a última regra declarada no CSS prevalece.
/* Remove estilos padrão do navegador */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
border-box inclui padding e border no width
/* Definir variáveis no :root */
:root {
--cor-primaria: #6366f1;
--cor-fundo: #0f172a;
--cor-texto: #e2e8f0;
--espaco: 16px;
--fonte: 'Inter', sans-serif;
}
/* Usar variáveis */
body {
background: var(--cor-fundo);
color: var(--cor-texto);
font-family: var(--fonte);
}
.botao {
background: var(--cor-primaria);
padding: var(--espaco);
}
lightbulb Com variáveis, basta mudar o valor em um lugar e ele se propaga para toda a página. Ideal para temas e manutenção.
css/style.css<link>font-familypadding e margin:hover nos linksrem para fontes e adicione border-radius
nos elementos!
Box Model, Display e Posicionamento.