Documentação de CSS
Referência concisa e baseada em exemplos de CSS. Leia o conceito, veja o código e pratique em uma jornada da Coddy.
Inicie uma jornada guiada de CSSPrimeiros passos
- CSS InlineO CSS inline coloca as declarações direto no elemento com o atributo style. Veja a sintaxe, quando o estilo inline é a escolha certa, por que ele vence as folhas de estilo e como se compara ao CSS interno e externo.
- CSS externoO CSS externo fica em um arquivo .css que cada página liga com <link rel="stylesheet">; o CSS interno fica em um elemento <style> dentro de uma página. Aprenda os dois, como funcionam os caminhos de arquivo e qual regra vence quando eles se encontram.
- ComentáriosO CSS tem uma só sintaxe de comentário, /* ... */, para uma linha ou várias. Veja onde os comentários podem ficar, como comentar uma regra e por que // e comentários aninhados quebram a regra seguinte sem aviso.
- !importantO !important faz uma declaração vencer as declarações normais, seja qual for a especificidade delas. Veja exatamente o que ele vence, o que vence ele, como a especificidade funciona por baixo e as formas mais limpas de ganhar um conflito de estilo.
- Variáveis CSSAs variáveis CSS (custom properties) guardam um valor uma vez e o reaproveitam com var(). Veja como declará-las no :root, definir escopo e sobrescrever, dar valores padrão, trocar temas com JavaScript e fugir da armadilha do valor inválido.
Seletores
- Seletores CSSUm seletor CSS escolhe os elementos que uma regra estiliza. Conheça todos os tipos de seletor, os quatro combinadores (descendente, filho, irmão adjacente, irmão geral), os seletores de atributo, o agrupamento, e teste seletores ao vivo.
- Seletor de classeO seletor de classe (.nome) estiliza todo elemento com aquela classe; o seletor de ID (#nome) estiliza o único elemento com aquele id. Veja a sintaxe, várias classes e classes encadeadas, classe vs id, regras de nomes e como alternar classes com JavaScript.
- Pseudo-classesPseudo-classes selecionam elementos pela posição ou pelo estado: :nth-child(), :first-child, :not(), :focus, :checked, :has() e outras. Veja a sintaxe, a fórmula an+b com um testador ao vivo e a diferença entre nth-child e nth-of-type.
- ::before e ::after::before e ::after inserem conteúdo gerado como primeiro e último filho de um elemento, direto do CSS. Veja a propriedade content, por que content vazio é obrigatório, como posicioná-los, tooltips com attr(), contadores e onde eles não funcionam.
- Hover CSSA pseudo-classe :hover estiliza um elemento enquanto o ponteiro está sobre ele. Veja efeitos de hover em botões e cards, transições suaves, cores de link com :link, :visited, :hover e :active na ordem certa e hover em telas de toque.
Modelo de caixa
- Box modelTodo elemento é uma caixa com quatro camadas: conteúdo, padding, borda e margin. Veja como cada camada soma no tamanho, como box-sizing: border-box muda a conta e cada camada medida ao vivo.
- Padding CSSPadding é o espaço dentro de um elemento, entre o conteúdo e a borda. Veja o shorthand padding com 1 a 4 valores, as propriedades de cada lado, o padding lógico, as porcentagens e como o padding muda o tamanho de um elemento.
- Margin CSSMargin é o espaço transparente fora da borda de um elemento que afasta os outros elementos. Veja o shorthand margin, como centralizar com margin: 0 auto, margens negativas, margin auto no flexbox e por que as margens verticais colapsam.
- Margin vs paddingPadding é o espaço dentro da borda de um elemento; margin é o espaço fora dela. Veja os dois na mesma caixa, lado a lado e ao vivo, e descubra qual usar para fundos, área de clique, espaço entre elementos e centralização.
- Border CSSA propriedade border desenha uma linha em volta do padding de um elemento. Veja o shorthand border, todos os estilos de borda, cores e lados individuais, cantos arredondados com border-radius e a diferença entre borda e outline.
- Width e heightwidth e height definem o tamanho da caixa de um elemento. Veja tamanhos fixos e em porcentagem, por que height: 100% muitas vezes não faz nada, min-height e max-width para layouts flexíveis, auto vs 100% e as palavras-chave fit-content.
Texto e fontes
- Font-size CSSA propriedade font-size define o tamanho do texto. Veja as unidades que ela aceita (px, rem, em, %, palavras-chave, vw), como mudar o tamanho da fonte no HTML, por que rem é o padrão seguro e como os tamanhos em em se multiplicam.
- Font-weightA propriedade font-weight deixa o texto em negrito, fino ou qualquer coisa entre os dois. Veja a escala numérica de 100 a 900, normal e bold, os relativos bolder e lighter e por que às vezes um peso não muda nada.
- Line-height CSSline-height define a altura de cada linha de texto e, com isso, o espaço entre as linhas. Veja por que um número sem unidade é o padrão certo, como valores em px, em e % são herdados de forma diferente e bons valores para texto e títulos.
- Cor do textoA tag <font color> está obsoleta; a cor do texto no HTML é definida com a propriedade CSS color. Veja como colorir uma página inteira, uma palavra, um link ou um título com cores nomeadas, hex e rgb, e como manter o texto legível.
- Sublinhado CSSSublinhe texto com text-decoration e depois controle a linha: cor, estilo, espessura e distância do texto. Veja também como tirar o sublinhado dos links e quando não fazer isso.
- Text-shadowtext-shadow desenha uma ou mais sombras atrás do texto. Veja os quatro valores (deslocamento x, deslocamento y, desfoque, cor), como empilhar sombras para efeitos de brilho, contorno e 3D e como usar a sombra para manter o texto legível em fundos carregados.
Cores e fundos
- Cores CSSTodas as formas de escrever uma cor no CSS: cores por nome, códigos hex, rgb() e rgba(), hsl(), transparência com canal alfa, currentColor e os mais novos oklch() e color-mix(). Cada uma com um exemplo ao vivo e um conversor.
- Cor de fundobackground-color preenche a caixa de um elemento com uma cor. Veja como definir a cor de fundo de uma página inteira, de uma div, de uma linha de tabela ou de uma palavra, como funciona a transparência, por que bgcolor está obsoleto e a diferença entre background-color e o shorthand background.
- Imagem de fundobackground-image coloca uma imagem ou um degradê atrás do conteúdo de um elemento. Veja url() e degradês, background-size (cover e contain), background-position, background-repeat, várias camadas de fundo e o shorthand background.
- Degradê CSSDegradês CSS são imagens que o navegador desenha a partir de cores. Veja o radial-gradient (formato, tamanho, posição), o linear-gradient (direção e ângulos), o conic-gradient, as paradas de cor, paradas bruscas para listras, degradês repetidos e texto com degradê.
- Box-shadow CSSbox-shadow desenha sombras em volta da caixa de um elemento. Veja os cinco valores (x, y, desfoque, spread, cor), sombras inset, várias sombras em camadas para uma profundidade realista, anéis de foco feitos com spread e os erros que deixam as sombras borradas.
Layout
- Display CSSA propriedade display decide como um elemento participa do layout. Veja block, inline e inline-block com caixas medidas lado a lado, display none vs visibility hidden e onde entram flex, grid, flow-root e contents.
- Position CSSposition: absolute coloca um elemento em coordenadas exatas dentro do ancestral posicionado mais próximo. Veja como o absolute funciona com position: relative, depois fixed e sticky, as propriedades top/right/bottom/left e inset e por que o sticky às vezes não gruda.
- Z-index CSSz-index decide qual elemento sobreposto é desenhado por cima. Veja em quais elementos ele funciona, como os stacking contexts agrupam elementos de modo que um z-index 9999 ainda possa perder, o que cria um stacking context e como resolver um z-index que não funciona.
- Overflow CSSoverflow decide o que acontece com um conteúdo que não cabe na caixa: mostrar, cortar ou pôr barras de rolagem. Veja visible, hidden, scroll, auto e clip, overflow-x e overflow-y, reticências no texto e os efeitos colaterais do overflow no layout.
- Float CSSfloat empurra um elemento para um lado e deixa o texto correr em volta dele, como as revistas posicionam fotos. Veja float left, right e inline-start, clear, por que o pai colapsa em volta de floats e como display: flow-root resolve, e por que floats não são mais usados para layout de página.
- Centralizar divTodas as formas de centralizar uma div na horizontal, na vertical ou nas duas: flexbox, grid, margin auto, position absolute com transform, inset com margin auto e align-content. Cada uma roda ao vivo e mede a própria centralização, com uma tabela de quando usar cada uma.
- Centralizar imagemUm <img> é inline, então se centraliza como texto: text-align: center no pai. Ou transforme a imagem em bloco com margin: 0 auto, ou centralize com flexbox ou grid, inclusive na vertical. Cada método roda ao vivo e mede o resultado.
Flexbox e Grid
- Flexbox CSSO flexbox organiza itens em uma linha ou coluna e controla como eles dividem o espaço e se alinham. Veja display: flex, o eixo principal e o eixo cruzado, todas as propriedades do contêiner, flex-grow, flex-shrink e flex-basis, com um playground ao vivo que mede onde cada item fica.
- Justify-contentjustify-content posiciona os itens flex ao longo do eixo principal, e align-items ao longo do eixo cruzado. Veja todos os valores lado a lado, medidos, com uma grade de alinhamento clicável, align-self e os motivos de o justify-content às vezes não fazer nada.
- Flex-wrapflex-wrap decide se os itens flex se espremem em uma linha ou passam para a próxima, e flex-direction decide se eles correm em linha ou em coluna. Veja os dois com exemplos ao vivo, o shorthand flex-flow, align-content e uma fileira de cards responsiva sem media queries.
- CSS GridO CSS grid organiza os itens em linhas e colunas ao mesmo tempo. Veja display: grid, grid-template-columns, a unidade fr, repeat() e minmax(), auto-fill vs auto-fit, como posicionar itens com grid-column e grid-template-areas, com um grid ao vivo que você edita e mede.
Design responsivo
- Media queriesUma media query aplica CSS só quando uma condição é verdadeira, como uma largura mínima de tela, um esquema de cores escuro ou um ponteiro de mouse. Veja a sintaxe do @media, breakpoints mobile first, a sintaxe de intervalo, prefers-color-scheme, matchMedia no JavaScript e container queries.
- Unidades CSSrem é relativo ao tamanho de fonte da raiz, em ao tamanho de fonte do elemento atual, px é fixo e % depende da propriedade. Veja cada unidade medida em uma demo aninhada, por que o em se multiplica, quando usar cada uma e como vw, vh e dvh funcionam.
- clamp()clamp(MIN, PREFERIDO, MAX) devolve o valor preferido, mas nunca menos que MIN nem mais que MAX. Veja como ele deixa tamanhos de fonte e espaçamentos fluidos sem media queries, como calcular o valor do meio e qual a relação dele com min() e max().
- calc()calc() deixa você fazer contas no CSS e misturar unidades, como 100% menos uma barra lateral fixa de 200px. Veja as regras de sintaxe (os espaços importam), calc() com variáveis CSS, layouts comuns que ele resolve e por que um calc() inválido é ignorado sem aviso.
Transições e efeitos
- Transition CSSUma transition CSS anima uma propriedade do valor antigo até o novo quando ela muda, por exemplo no hover. Veja o shorthand transition, todas as funções de tempo lado a lado, o que pode e o que não pode ser animado, a solução para height: auto e o movimento reduzido.
- Animação CSSAs animações CSS levam um elemento pelas etapas que você define em @keyframes, sozinhas e quantas vezes você quiser. Veja a sintaxe do @keyframes, as oito propriedades de animation, fill-mode e direction, indicadores de carregamento, como pausar e como respeitar o movimento reduzido.
- Transform CSSA propriedade transform move, redimensiona, gira e inclina um elemento sem mudar o layout em volta. Veja todas as funções de transform, por que a ordem das funções importa, transform-origin, as propriedades separadas translate, scale e rotate e o truque de centralização translate(-50%, -50%).
- Rotate CSSRotacione um elemento com transform: rotate(45deg) ou com a propriedade rotate, mais nova. Veja as unidades de ângulo (deg, turn, rad), como girar em volta de um canto com transform-origin, rotacionar texto e ícones, um loader girando e a rotação 3D com rotateX e rotateY.
- Opacity CSSopacity deixa um elemento inteiro, e tudo o que está dentro dele, transparente, de 0 (invisível) a 1 (sólido). Veja os valores, por que a opacidade esmaece o texto também e como deixar só o fundo transparente, opacity: 0 vs visibility vs display e o fade no hover.
- Blur e filterfilter: blur(5px) desfoca um elemento, e backdrop-filter: blur() desfoca o que está atrás dele. Veja todas as funções de filter (brightness, contrast, grayscale, sepia, saturate, hue-rotate, invert, drop-shadow) com controles ao vivo, como combiná-las e o problema das bordas desfocadas.
