Referência de 154 propriedades CSS
O que cada propriedade faz, quais valores se usam de fato e se é herdada, em uma linha.
Layout11
Propriedades que decidem que tipo de caixa um elemento é e o que acontece ao transbordar.
displayDefine que tipo de caixa o elemento é: o ponto de partida de qualquer layout.visibilityMostra ou esconde; com hidden o espaço continua ocupado.floatFlutua o elemento para um lado e o texto contorna; hoje flex e grid fazem isso.clearEmpurra o elemento para baixo dos flutuantes anteriores.overflowDecide se o conteúdo que transborda é cortado ou rola.overflow-xControla apenas o transbordo horizontal.overflow-yControla apenas o transbordo vertical.box-sizingDecide se a largura inclui preenchimento e borda; border-box é mais fácil de calcular.aspect-ratioFixa a relação largura-altura: define um lado e o outro acompanha.container-typePermite que estilos respondam ao tamanho da caixa pai, não da tela.isolationCria uma camada nova para que a mesclagem não vaze.
Flexbox e grid24
Propriedades que alinham elementos e os assentam numa grade: hoje quase todo layout usa uma das duas.
flex-directionDefine se os itens flex ficam em linha ou coluna.flex-wrapDecide se os itens passam para outra linha quando não cabem.flexDistribui o espaço restante de uma vez; flex: 1 divide igualmente.flex-growQuanto do espaço restante este item toma.flex-shrinkQuanto o item encolhe quando falta espaço; com 0 não encolhe.flex-basisO tamanho inicial antes de crescer ou encolher.justify-contentDistribui os itens ao longo do eixo principal.align-itemsAlinha os itens no eixo transversal; center é a centralização vertical usual.align-selfAltera o alinhamento de um único item.align-contentDistribui as linhas quando os itens ocupam várias fileiras.gapO espaço entre itens; ao contrário da margem, não sobra por fora.row-gapDefine apenas o espaço entre linhas.column-gapDefine apenas o espaço entre colunas.orderMuda a ordem visual sem alterar a do HTML.grid-template-columnsDefine quantas colunas a grade tem e a largura de cada uma.grid-template-rowsDefine quantas linhas a grade tem e a altura de cada uma.grid-template-areasNomeia áreas da grade para escrever o layout como um desenho.grid-columnIndica quantas colunas um item ocupa.grid-rowIndica quantas linhas um item ocupa.grid-auto-flowDecide em que direção os itens sem posição preenchem a grade.grid-auto-rowsDefine a altura das linhas criadas automaticamente.place-itemsDefine os dois eixos de alinhamento de uma vez; com center tudo centraliza.place-contentPosiciona o bloco de conteúdo nos dois eixos.justify-itemsPosiciona os itens horizontalmente dentro da própria célula.
Caixa e espaçamento16
Tamanho e espaçamento. As margens externas se colapsam; o preenchimento é pintado pelo fundo.
widthO tamanho horizontal; 100% segue o pai e 100vw a janela.heightO tamanho vertical; com auto ocupa apenas o que o conteúdo pede.min-widthImpede a caixa de ficar mais estreita; em flex, 0 permite encolher.max-widthLimita a largura; o jeito usual de controlar o comprimento da linha.min-heightImpede a caixa de ficar mais baixa.max-heightLimita a altura; o que passa é tratado por overflow.marginO espaço externo; margens de topo e base se colapsam em uma.margin-topO espaço externo acima.margin-rightO espaço externo à direita; com auto a caixa vai para a esquerda.margin-bottomO espaço externo abaixo.margin-leftO espaço externo à esquerda; auto dos dois lados centraliza a caixa.paddingO espaço interno; a cor de fundo chega até aqui.padding-topO espaço interno acima.padding-rightO espaço interno à direita.padding-bottomO espaço interno abaixo; em porcentagem serve para gerar altura.padding-leftO espaço interno à esquerda.
Texto25
Fonte, entrelinha, alinhamento: como o texto se lê. A maioria é herdada.
font-sizeO tamanho do texto; rem multiplica o tamanho raiz e respeita o zoom do leitor.font-familyDefine a fonte; o navegador percorre a lista, então termine com uma família genérica.font-weightA espessura do traço; 400 é normal e 700 é negrito.font-styleLiga ou desliga o itálico.fontDefine vários valores de fonte de uma vez; o omitido volta ao padrão.line-heightA entrelinha; um valor sem unidade como 1.5 se herda melhor.letter-spacingO espaço entre letras; apertar um pouco favorece títulos grandes.word-spacingO espaço entre palavras.text-alignAlinha o texto horizontalmente.text-decorationAdiciona sublinhado ou riscado; também remove o sublinhado padrão dos links.text-decoration-lineEscolhe qual linha de decoração é desenhada.text-decoration-colorDá cor àquela linha separadamente.text-decoration-styleDefine o estilo da linha; wavy dá a ondulação do corretor.text-transformMuda maiúsculas e minúsculas só na exibição; o texto original fica igual.text-indentRecua a primeira linha do bloco.text-overflowCorta o texto que transborda com reticências; exige overflow e nowrap.text-shadowLança sombra atrás do texto: útil para letras brancas sobre fotos.white-spaceControla espaços e quebras de linha; com nowrap tudo fica em uma linha.word-breakDecide onde palavras longas quebram; keep-all evita quebrar palavras em coreano.overflow-wrapForça a quebra de sequências longas sem espaço: útil para URLs.writing-modeMuda a direção do texto: é assim que se escreve na vertical.vertical-alignAlinha verticalmente dentro da linha; também vale em células de tabela.font-variant-numericEscolhe o estilo dos algarismos; tabular-nums iguala a largura e estabiliza tabelas.hyphensPermite quebrar palavras com hífen no fim da linha; exige o idioma declarado.text-wrapEscolhe como as linhas quebram; balance iguala o comprimento em títulos.
Cor e fundo13
Cor do texto, cor de fundo, gradientes e transparência.
colorA cor do texto; currentColor remete a este valor.background-colorA cor de fundo; preenche também o padding.background-imageColoca uma imagem ou gradiente ao fundo; vários podem ser empilhados.background-sizeDimensiona a imagem de fundo; cover preenche sem falhas e contain mostra tudo.background-positionPosiciona a imagem de fundo dentro da caixa.background-repeatDecide se a imagem de fundo se repete.background-attachmentDecide se o fundo rola com a página ou fica fixo.backgroundDefine todos os valores de fundo de uma vez; o omitido volta ao padrão.background-clipLimita até onde o fundo pinta; com text recorta nas letras.opacityA transparência geral; os filhos também desbotam.mix-blend-modeDefine como as cores se mesclam com o que está abaixo.accent-colorColore os controles desenhados pelo navegador, como caixas e rádios.color-schemeDeclara se a página suporta modo claro, escuro ou ambos.
Bordas13
Bordas, cantos e sombras. O contorno não ocupa espaço próprio.
borderDefine espessura, estilo e cor da borda em uma linha.border-widthDefine apenas a espessura da borda.border-styleDefine apenas o estilo; sem ele a borda não aparece.border-colorDefine apenas a cor da borda.border-topDefine apenas a borda de cima.border-bottomDefine apenas a borda de baixo: o separador usual entre linhas.border-radiusArredonda os cantos; 50% vira círculo e um valor enorme vira pílula.outlineUma linha fora da borda; não ocupa espaço, por isso serve ao foco do teclado.outline-widthDefine apenas a espessura do contorno.outline-styleDefine apenas o estilo do contorno.outline-colorDefine apenas a cor do contorno.outline-offsetAfasta o contorno do elemento.box-shadowLança sombra ao redor da caixa; com inset vai por dentro.
Efeitos7
Efeitos aplicados depois da pintura: desfoque, recorte, preenchimento.
filterAplica desfoque, escala de cinza ou brilho; podem ser encadeados.backdrop-filterFiltra o que está atrás do elemento: é assim que se faz o vidro fosco.clip-pathRecorta o elemento em uma forma dada.mask-imageEsconde partes conforme o brilho de uma imagem: útil para esmaecer bordas.object-fitDecide como imagem ou vídeo preenche a caixa; cover corta para preencher.object-positionEscolhe qual parte sobrevive ao corte: assim se preservam os rostos.image-renderingEscolhe escalonamento suave ou nítido; pixelated preserva pixel art.
Transformação e movimento14
Mover, girar e suavizar. Não mexem no layout, então nada salta.
transformMove, gira e escala; a caixa fica no lugar, então nada mais se desloca.transform-originO ponto de âncora ao girar ou escalar.transitionSuaviza a mudança de um valor; em uma linha diz o quê, por quanto e como.transition-propertyIndica quais propriedades animam; all é cômodo mas pode pesar.transition-delayQuanto se espera antes de começar.transition-durationQuanto dura a mudança; cerca de 0,2 s parece natural.transition-timing-functionMolda o ritmo; ease começa e termina suave.animationReproduz quadros-chave; nome, duração e repetição em uma linha.animation-nameO nome dos quadros-chave.animation-timing-functionO ritmo do movimento; com steps avança aos saltos.animation-durationQuanto dura um ciclo.animation-iteration-countQuantas vezes repete; com infinite não para.will-changeAvisa o navegador do que vai mudar; abusar disso sai pela culatra.perspectiveDefine a profundidade das transformações 3D; valores menores exageram.
Posicionamento7
Tirar um elemento do fluxo e posicioná-lo; z-index decide quem fica à frente.
positionEscolhe o esquema de posição; sticky fixa o elemento ao rolar.topA que distância fica da borda superior.rightA que distância fica da borda direita.bottomA que distância fica da borda inferior.leftA que distância fica da borda esquerda.insetDefine os quatro lados de uma vez; com 0 preenche todo o pai.z-indexDecide o que fica em cima; compara-se só dentro do mesmo contexto de empilhamento.
Tabelas4
Propriedades para bordas de tabela e largura de colunas.
Listas4
A forma e a posição dos marcadores de lista.
Interação9
Como o elemento responde ao mouse, ao dedo e à rolagem.
cursorDefine a forma do ponteiro; pointer indica que algo é clicável.pointer-eventsDecide se recebe eventos de ponteiro; com none os cliques atravessam.user-selectDecide se o texto pode ser selecionado arrastando.touch-actionControla quais gestos o navegador trata; manipulation remove o zoom de toque duplo.scroll-behaviorFaz a rolagem saltar ou deslizar.scroll-snap-typeEncaixa a rolagem em posições fixas: comum em carrosséis.overscroll-behaviorDecide se ao chegar ao fim o pai se move; contain para dentro.resizePermite ao usuário redimensionar; usado sobretudo em textarea.caret-colorColore o cursor piscante do campo.
Impressão e diversos7
O resto: impressão, conteúdo gerado e numeração automática.
page-break-afterForça ou evita quebra de página depois, ao imprimir.break-insideImpede que o elemento se parta entre páginas ou colunas.contentO conteúdo gerado por ::before ou ::after; muitas vezes só aspas vazias.counter-resetInicia ou reinicia um contador de numeração.counter-incrementAvança o contador; junto de content numera títulos automaticamente.quotesEscolhe as aspas que o elemento q usa conforme o idioma.allReinicia todas as propriedades de uma vez: útil para limpar estilos herdados.
Como ler
- Uma propriedade herdada basta escrever no pai: todos os filhos recebem. Quase todas as de texto funcionam assim.
- Um atalho reinicia o que você omite. Escrever só background: red também apaga a imagem de fundo definida antes.
- Quando duas regras colidem vence o seletor mais específico; só com especificidade igual decide a ordem.
- Anime transform e opacity para suavidade. Mudar width ou top obriga a recalcular o layout.
Perguntas frequentes
Q. Quantas propriedades CSS existem?
O padrão lista mais de 500, mas só uma parte aparece no dia a dia. Aqui estão as 154 que se acaba escrevendo sempre, agrupadas por propósito.
Q. O que significa ser herdada?
Que o valor desce: você define no pai e os filhos usam sem repetir. Quase todas as propriedades de texto herdam; espaçamento e bordas não.
Q. O que muda ao usar um atalho?
Você define vários valores numa linha, mas o que omite volta ao padrão. É por isso que background: red sozinho também apaga a imagem de fundo anterior.
Q. Se a mesma propriedade aparece duas vezes, qual vence?
Primeiro conta a especificidade: id vence classe e classe vence tag. Só com especificidade igual vence a regra posterior. !important passa por cima de tudo, e por isso é melhor evitá-lo.
Q. Devo usar px ou rem?
Um rem é múltiplo do tamanho raiz, então cresce quando o leitor amplia o texto no navegador. Use rem para tipografia e espaçamento; px serve onde o valor nunca deve mudar, como uma borda de um pixel.