Folha de Consulta CSS
Última atualização
Seletores
Como selecionar os elementos que você quer estilizar.
| Seletor | Seleciona |
|---|---|
* | Todos os elementos |
p | Todos os elementos <p> (por tag) |
.btn | Elementos com class="btn" |
#main | O elemento com id="main" |
div p | Todos os <p> dentro de um <div> (descendentes) |
div > p | Apenas filhos diretos |
a:hover | Links com o mouse sobre eles (pseudoclasse) |
li:first-child | Primeiro <li> em seu pai |
li:nth-child(2n) | Todo <li> par |
input[type="text"] | Inputs com esse atributo |
p::before | Conteúdo gerado antes de <p> (pseudoelemento) |
Box model
Todo elemento é uma caixa: conteúdo, padding, borda, margem.
| Propriedade | O que faz |
|---|---|
width / height | Tamanho da caixa de conteúdo |
padding | Espaço dentro da borda |
border | 1px solid #333 - largura, estilo, cor |
margin | Espaço fora da borda |
box-sizing: border-box | Faz a largura incluir padding + borda |
margin: 0 auto | Centraliza um elemento de bloco horizontalmente |
overflow: hidden | Corta o conteúdo que transborda |
Tipografia e cor
| Propriedade | Exemplo |
|---|---|
color | color: #333 - cor do texto |
background | background: #fff ou uma imagem/gradiente |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (ou rem, em) |
font-weight | 400 (normal) … 700 (negrito) |
line-height | 1.5 - espaçamento entre linhas |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Layout unidimensional - linhas ou colunas. Defina display: flex no pai.
| Propriedade (no contêiner) | O que faz |
|---|---|
display: flex | Torna os filhos itens flex |
flex-direction | row (padrão) ou column |
justify-content | Alinha ao longo do eixo principal (center, space-between) |
align-items | Alinha ao longo do eixo transversal (center, stretch) |
gap | Espaço entre os itens, ex.: gap: 16px |
flex-wrap | wrap permite que os itens fluam para novas linhas |
flex: 1 (em um filho) | O item cresce para preencher o espaço disponível |
Grid
Layout bidimensional. Defina display: grid no pai.
| Propriedade | O que faz |
|---|---|
display: grid | Torna os filhos itens grid |
grid-template-columns | 1fr 1fr 1fr ou repeat(3, 1fr) |
grid-template-rows | Define os tamanhos das linhas |
gap | Espaço entre linhas e colunas |
grid-column | 1 / 3 - estende um item por colunas |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) para grids responsivos |
place-items: center | Centraliza cada item em sua célula |
Posicionamento e display
| Propriedade / valor | O que faz |
|---|---|
position: static | Padrão - no fluxo normal |
position: relative | Deslocado de sua posição normal |
position: absolute | Posicionado em relação ao ancestral posicionado mais próximo |
position: fixed | Fixado na viewport |
position: sticky | Gruda ao rolar até um limite |
top / right / bottom / left | Deslocamentos para elementos posicionados |
z-index | Ordem de empilhamento (maior = na frente) |
display: none | Remove o elemento do layout |
display: inline-block | Flui inline mas aceita largura/altura |
Transições e transformações
| Propriedade | Exemplo |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0) - mover |
transform: scale | scale(1.1) - redimensionar |
transform: rotate | rotate(45deg) |
opacity | 0 (invisível) … 1 (opaco) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px - cantos arredondados |
Unidades e design responsivo
| Unidade / recurso | Significado |
|---|---|
px | Pixels absolutos |
% | Relativo ao pai |
rem | Relativo ao tamanho de fonte raiz |
em | Relativo ao tamanho de fonte atual |
vw / vh | 1% da largura / altura da viewport |
fr | Fração do espaço livre (grid) |
@media (max-width: 600px) { … } | Aplica regras abaixo de um breakpoint |
Seletores, o box model, flexbox, grid e as propriedades que você sempre esquece - em uma única página. Esta folha de consulta CSS é uma referência rápida para estilizar e organizar páginas web, de selecionar elementos a centralizá-los.
Tudo aqui é CSS padrão que funciona em navegadores modernos. Copie uma regra ou teste-a ao vivo no playground de HTML, onde você pode editar CSS com pré-visualização instantânea.
Perguntas frequentes sobre a folha de consulta CSS
Esta folha de consulta CSS é gratuita?
Sim. Esta folha de consulta CSS é gratuita, sem necessidade de cadastro. Salve nos favoritos e use sempre que precisar consultar um seletor, uma propriedade ou um padrão de layout.
Devo usar flexbox ou grid?
Use flexbox para layouts unidimensionais - uma fileira de botões, uma navbar, itens em uma única linha ou coluna. Use grid para layouts bidimensionais em que você controla linhas e colunas ao mesmo tempo, como o layout de uma página ou uma galeria de cards. Eles funcionam bem juntos: um grid de cards em que cada card usa flexbox internamente é comum.
Como centralizo uma div com CSS?
A forma moderna mais simples é flexbox no pai:
display: flex; justify-content: center; align-items: center; centraliza um filho tanto horizontal quanto verticalmente. Para apenas a centralização horizontal de um elemento de bloco com largura definida, margin: 0 auto ainda funciona.Posso praticar CSS online?
Sim. Abra o playground de HTML para escrever HTML e CSS juntos com pré-visualização ao vivo. Quando quiser estrutura, o curso interativo e gratuito de CSS da Coddy cobre seletores, o box model, flexbox e grid passo a passo.
Esta folha de consulta é boa para iniciantes?
Sim. Ela vai dos seletores e do box model (os fundamentos) a flexbox, grid e transições, de modo que você pode começar pelas seções de cima e ir avançando para o layout moderno.
Recursos relacionados
Mais folhas de consulta
