CSS3: O Guia Visual

Seleciona todos os elementos de parágrafo (<p>) no documento HTML e aplica a eles a cor azul para o texto. Este é o tipo de seletor mais fundamental, que atua diretamente sobre o nome da tag HTML.

p { color: blue; }

Seleciona todos os elementos de título de nível 1 (<h1>) no documento HTML e define o tamanho da fonte para 2 vezes o tamanho da fonte padrão do elemento pai. Útil para estilizar todos os títulos de um determinado nível de forma consistente.

h1 { font-size: 2em; }

Seleciona todas as divisões (<div>) no documento HTML e aplica uma margem de 10 pixels em todos os quatro lados (topo, direita, inferior, esquerda). Usado para espaçamento externo uniforme de todos os blocos div.

div { margin: 10px; }

Seleciona todos os elementos span (<span>) e garante que eles se comportem como elementos em linha, ocupando apenas o espaço necessário para seu conteúdo. Embora `inline` seja o padrão para `span`, esta declaração pode ser usada para reforçar ou sobrescrever estilos herdados.

span { display: inline; }

Seleciona todos os elementos HTML que possuem o atributo `class="classe"` e define a cor do texto para vermelho. Seletores de classe são ideais para aplicar estilos a múltiplos elementos não relacionados ou para reutilização de estilos.

.classe { color: red; }

Seleciona elementos com a classe `btn-primary` e define a cor de fundo para azul. Comumente utilizado para estilizar botões principais em interfaces de usuário.

.btn-primary { background: blue; }

Seleciona elementos com a classe `text-center` e centraliza o texto dentro deles. Uma classe utilitária comum para alinhamento de texto.

.text-center { text-align: center; }

Seleciona elementos com a classe `hidden` e os remove completamente do fluxo do documento, tornando-os invisíveis e não interativos. Diferente de `visibility: hidden;`, `display: none;` não ocupa espaço.

.hidden { display: none; }

Seleciona o elemento HTML que possui o atributo `id="header"` e o posiciona de forma fixa na viewport. Seletores de ID devem ser usados para elementos únicos na página.

#header { position: fixed; }

Seleciona o elemento com o ID `main-content` e define sua largura máxima para 1200 pixels. Isso garante que o conteúdo principal não exceda uma largura específica, mantendo-o legível em telas grandes.

#main-content { max-width: 1200px; }

Seleciona o elemento com o ID `sidebar` e define sua largura para 300 pixels. Usado para definir dimensões fixas para componentes de layout específicos.

#sidebar { width: 300px; }

Seleciona o elemento com o ID `footer` e aplica uma margem superior de 50 pixels. Isso cria um espaçamento entre o rodapé e o conteúdo acima dele.

#footer { margin-top: 50px; }

Seleciona apenas os elementos `div` que também possuem a classe `container`, definindo sua largura para 100%. Este seletor combina um seletor de elemento com um seletor de classe para maior especificidade.

div.container { width: 100%; }

Seleciona todos os itens de lista (<li>) que são descendentes de uma lista não ordenada (<ul>) com a classe `nav`, fazendo com que se comportem como elementos em linha. Comumente usado para criar menus de navegação horizontais.

ul.nav li { display: inline; }

Seleciona o elemento com a classe `logo` que é um descendente de um elemento com o ID `header`, fazendo-o flutuar à esquerda. Isso é útil para posicionar elementos específicos dentro de um contêiner identificado.

#header .logo { float: left; }

Seleciona todos os títulos de nível 2 (<h2>) que são descendentes de um elemento `<article>` com a classe `post`, definindo sua cor para um tom de cinza escuro. Ajuda a estilizar títulos dentro de um contexto específico de conteúdo.

article.post h2 { color: #333; }

Define a largura explícita do conteúdo do elemento para 300 pixels. Esta propriedade controla a dimensão horizontal do elemento.

width: 300px;

Define a altura explícita do conteúdo do elemento para 200 pixels. Esta propriedade controla a dimensão vertical do elemento.

height: 200px;

Define a largura máxima que o elemento pode ocupar para 100% do seu contêiner pai. Isso é crucial para tornar elementos, como imagens, responsivos, garantindo que eles não transbordem em telas menores.

max-width: 100%;

Define a altura mínima do elemento para 100% da altura da viewport (altura visível da janela do navegador). Garante que o elemento ocupe pelo menos a altura total da tela, útil para layouts de página inteira.

min-height: 100vh;

Altera o Box Model padrão, fazendo com que a largura e a altura de um elemento incluam o padding e a borda, mas não a margem. Isso simplifica o cálculo de dimensões e o layout, pois o tamanho total do elemento permanece consistente independentemente do padding ou borda adicionados.

box-sizing: border-box;

Aplica uma margem de 10 pixels em todos os quatro lados (topo, direita, inferior, esquerda) do elemento. A margem cria espaço externo entre o elemento e outros elementos adjacentes.

margin: 10px;

Aplica uma margem de 10 pixels no topo e na parte inferior, e 20 pixels na esquerda e na direita do elemento. Esta é uma sintaxe abreviada para definir margens verticais e horizontais de forma diferente.

margin: 10px 20px;

Define margens específicas para cada lado do elemento, na ordem: topo (10px), direita (15px), inferior (20px) e esquerda (25px). Permite controle granular sobre o espaçamento externo.

margin: 10px 15px 20px 25px;

Aplica uma margem de 20 pixels exclusivamente na parte superior do elemento, sem afetar os outros lados. Útil para criar espaçamento vertical específico.

margin-top: 20px;

Define a margem superior e inferior como 0 e as margens laterais como "auto". Para elementos de bloco com uma largura definida, isso os centraliza horizontalmente dentro de seu contêiner pai.

margin: 0 auto;

Aplica um preenchimento (padding) de 15 pixels em todos os quatro lados do conteúdo do elemento. O padding cria espaço interno entre o conteúdo e a borda do elemento.

padding: 15px;

Aplica um padding de 10 pixels no topo e na parte inferior, e 20 pixels na esquerda e na direita do elemento. Sintaxe abreviada para definir padding vertical e horizontal de forma diferente.

padding: 10px 20px;

Define padding específicos para cada lado do elemento, na ordem: topo (5px), direita (10px), inferior (15px) e esquerda (20px). Permite controle granular sobre o espaçamento interno.

padding: 5px 10px 15px 20px;

Aplica um padding de 30 pixels exclusivamente na parte esquerda do elemento, sem afetar os outros lados. Útil para criar espaçamento interno específico.

padding-left: 30px;

Aplica um padding de 1 "em" em todos os lados. A unidade `em` é relativa ao tamanho da fonte do próprio elemento, tornando o espaçamento escalável com o texto.

padding: 1em;

Define uma borda de 1 pixel de largura, estilo sólido e cor cinza claro (`#ccc`) em todos os quatro lados do elemento. Esta é uma propriedade abreviada para `border-width`, `border-style` e `border-color`.

border: 1px solid #ccc;

Aplica um raio de 5 pixels aos cantos do elemento, tornando-os arredondados. Um valor maior resulta em cantos mais arredondados.

border-radius: 5px;

Aplica um raio de 50% aos cantos do elemento. Se o elemento for quadrado, ele se tornará um círculo perfeito; se for retangular, se tornará uma forma oval.

border-radius: 50%;

Define uma borda de 2 pixels de largura, estilo tracejado (`dashed`) e cor vermelha apenas na parte superior do elemento. Permite estilizar bordas individuais de forma independente.

border-top: 2px dashed red;

Remove completamente qualquer borda existente no elemento. É uma forma concisa de garantir que um elemento não tenha bordas.

border: none;

Define a família de fontes para o texto. O navegador tentará usar "Arial" primeiro; se não estiver disponível, usará qualquer fonte genérica "sans-serif" (sem serifa). É uma boa prática fornecer fontes de fallback.

font-family: Arial, sans-serif;

Define a família de fontes, usando aspas para nomes de fontes que contêm espaços, como "Helvetica Neue". Se a primeira não estiver disponível, "Helvetica" será usada como fallback.

font-family: "Helvetica Neue", Helvetica;

Define a família de fontes para uma fonte com serifa, como "Times New Roman". Fontes serifadas são tradicionalmente usadas para textos longos em impressão.

font-family: "Times New Roman", serif;

Define a família de fontes para uma fonte monoespaçada, como "Courier New". Fontes monoespaçadas são aquelas em que todos os caracteres têm a mesma largura, ideal para blocos de código ou dados tabulares.

font-family: "Courier New", monospace;

Define uma sequência de fontes alternativas. O navegador tentará "Georgia", depois "Times New Roman" e, por último, qualquer fonte genérica "serif" disponível, garantindo compatibilidade.

font-family: Georgia, "Times New Roman", serif;

Define o tamanho da fonte para 16 pixels. Unidades de pixel fornecem um controle de tamanho fixo e preciso, mas podem ser menos flexíveis para responsividade.

font-size: 16px;

Define o tamanho da fonte para 1 "em", que é equivalente ao tamanho da fonte do elemento pai. Isso permite que o texto se adapte proporcionalmente ao seu contêiner.

font-size: 1em;

Define o tamanho da fonte para 1 "rem", que é equivalente ao tamanho da fonte do elemento raiz (<html>). `rem` é ideal para manter uma escala de fonte consistente em todo o documento, facilitando a responsividade.

font-size: 1rem;

Define o peso da fonte para negrito. Pode ser usado para destacar texto importante. Outros valores incluem `normal`, `lighter`, `bolder` ou valores numéricos de 100 a 900.

font-weight: bold;

Define o peso da fonte usando um valor numérico (entre 100 e 900, em múltiplos de 100). `300` geralmente corresponde a uma fonte "light" ou "fina", se disponível na família de fontes.

font-weight: 300;

Define o estilo da fonte para itálico. Usado para enfatizar texto ou para estilos tipográficos específicos. Outros valores incluem `normal` e `oblique`.

font-style: italic;

Aplica uma linha abaixo do texto, ou seja, sublinha-o. Comumente usado para links, mas pode ser aplicado a qualquer texto.

text-decoration: underline;

Remove qualquer decoração de texto padrão, como o sublinhado em links (<a>). Essencial para estilizar links de forma personalizada.

text-decoration: none;

Converte todo o texto do elemento para letras maiúsculas, sem alterar o conteúdo original no HTML. Útil para títulos ou destaque visual.

text-transform: uppercase;

Converte a primeira letra de cada palavra no texto do elemento para maiúscula. Útil para títulos ou nomes próprios.

text-transform: capitalize;

Centraliza horizontalmente o texto dentro do seu elemento contêiner. Aplica-se a elementos de bloco ou células de tabela.

text-align: center;

Distribui o texto uniformemente entre as margens esquerda e direita, adicionando espaço extra entre as palavras conforme necessário. Comumente usado em blocos de texto longos para uma aparência formal.

text-align: justify;

Define a altura da linha para 1.5 vezes o tamanho da fonte do elemento. Um `line-height` sem unidade é o mais recomendado, pois escala proporcionalmente com o `font-size`, melhorando a legibilidade.

line-height: 1.5;

Adiciona um espaçamento extra de 1 pixel entre os caracteres do texto. Pode ser usado para ajustar a densidade visual do texto.

letter-spacing: 1px;

Adiciona um espaçamento extra de 2 pixels entre as palavras do texto. Pode ser usado para ajustar a legibilidade de frases.

word-spacing: 2px;

Define a cor do texto usando um código hexadecimal de 6 dígitos (ou 3), onde cada par representa os valores de vermelho, verde e azul (RGB). `#333333` é um tom de cinza escuro.

color: #333333;

Define a cor do texto usando o modelo RGB (Red, Green, Blue), com valores de 0 a 255 para cada componente. `rgb(51, 51, 51)` é equivalente a `#333333`.

color: rgb(51, 51, 51);

Define a cor do texto usando o modelo RGBA, que inclui um canal alfa (transparência) com valor de 0 (totalmente transparente) a 1 (totalmente opaco). `0.8` significa 80% de opacidade.

color: rgba(51, 51, 51, 0.8);

Define a cor do texto usando o modelo HSL (Hue, Saturation, Lightness). `Hue` (matiz) é um grau no círculo de cores (0-360), `Saturation` (saturação) é a intensidade da cor (0-100%), e `Lightness` (luminosidade) é o brilho (0-100%). `hsl(0, 0%, 20%)` é um cinza escuro.

color: hsl(0, 0%, 20%);

Faz com que o elemento herde a cor do texto de seu elemento pai. Útil para manter a consistência de cores em elementos aninhados.

color: inherit;

Define uma cor de fundo sólida para o elemento usando um código hexadecimal. `#f5f5f5` é um tom de cinza muito claro, quase branco.

background-color: #f5f5f5;

Aplica um gradiente linear como cor de fundo, que transita de uma cor para outra em uma direção específica. `to right` indica que o gradiente vai da esquerda para a direita, com as cores `#ff7e5f` (laranja avermelhado) e `#feb47b` (pêssego).

background: linear-gradient(to right, #ff7e5f, #feb47b);

Aplica um gradiente radial como cor de fundo, que se espalha a partir de um ponto central. `circle` define a forma do gradiente, transicionando de `#ff7e5f` no centro para `#feb47b` nas bordas.

background: radial-gradient(circle, #ff7e5f, #feb47b);

Define uma imagem como fundo do elemento. O caminho para a imagem é especificado dentro de `url()`. Por padrão, a imagem se repetirá para cobrir todo o elemento.

background: url("image.jpg");

Ajusta o tamanho da imagem de fundo para que ela cubra completamente a área do elemento, cortando as partes que excedem. Mantém a proporção da imagem.

background-size: cover;

Impede que a imagem de fundo se repita. Se a imagem for menor que o elemento, ela aparecerá apenas uma vez.

background-repeat: no-repeat;

Posiciona a imagem de fundo no centro horizontal e vertical do elemento. Pode ser combinado com `background-repeat: no-repeat;` para exibir uma única imagem centralizada.

background-position: center center;

Faz com que a imagem de fundo permaneça fixa na viewport enquanto o restante do conteúdo da página rola. Cria um efeito de paralaxe.

background-attachment: fixed;

Define como as imagens de fundo (ou cores) de um elemento devem ser misturadas entre si. `multiply` multiplica as cores de fundo, resultando em cores mais escuras.

background-blend-mode: multiply;

Define o nível de opacidade (transparência) de todo o elemento, incluindo seu conteúdo. Um valor de `0.8` significa 80% opaco (20% transparente).

opacity: 0.8;

Define a cor de um elemento para o valor atual da propriedade `color` do próprio elemento. Útil para elementos como bordas ou preenchimentos de SVG que devem corresponder à cor do texto.

color: currentColor;

Define a cor de preenchimento de uma forma SVG. Aplica-se a elementos SVG como `<path>`, `<circle>`, `<rect>`, etc., preenchendo seu interior com a cor especificada.

fill: #333;

Define a cor da borda (contorno) de uma forma SVG. Aplica-se a elementos SVG, desenhando um contorno com a cor especificada.

stroke: #666;

Aplica um filtro de brilho ao elemento. Um valor de `1.2` (ou 120%) aumenta o brilho em 20%. `1` é o valor normal, `0` é totalmente preto.

filter: brightness(1.2);

Aplica um filtro de saturação ao elemento. Um valor de `1.5` (ou 150%) aumenta a saturação das cores em 50%, tornando-as mais vibrantes. `1` é o valor normal, `0` é totalmente dessaturado (escala de cinza).

filter: saturate(1.5);

Faz com que o elemento se comporte como um elemento de bloco. Ele ocupa toda a largura disponível, força uma quebra de linha antes e depois dele e permite a aplicação de `width`, `height`, `margin` e `padding`.

display: block;

Faz com que o elemento se comporte como um elemento em linha. Ele ocupa apenas a largura necessária para seu conteúdo, não força quebras de linha e ignora `width`, `height` e `margin-top`/`margin-bottom`.

display: inline;

Combina características de `inline` e `block`. O elemento se comporta como `inline` (não força quebra de linha), mas aceita `width`, `height`, `margin` e `padding` como um elemento `block`.

display: inline-block;

Remove completamente o elemento do fluxo do documento. Ele não é renderizado, não ocupa espaço e não é interativo. Diferente de `visibility: hidden;`, que apenas oculta o elemento visualmente, mas mantém seu espaço.

display: none;

Transforma o elemento em um contêiner flexível, ativando o contexto Flexbox para seus filhos diretos. Permite criar layouts de uma dimensão (linha ou coluna) de forma eficiente e responsiva.

display: flex;

Transforma o elemento em um contêiner de grade, ativando o contexto CSS Grid para seus filhos diretos. Permite criar layouts bidimensionais (linhas e colunas) complexos e responsivos.

display: grid;

É o valor padrão para todos os elementos. Elementos com `position: static;` são posicionados de acordo com o fluxo normal do documento e as propriedades `top`, `right`, `bottom`, `left` e `z-index` não têm efeito.

position: static;

O elemento é posicionado de acordo com o fluxo normal do documento, mas pode ser deslocado de sua posição original usando `top`, `right`, `bottom` e `left`. O espaço original do elemento é mantido no layout.

position: relative;

O elemento é removido do fluxo normal do documento e posicionado em relação ao seu ancestral posicionado mais próximo (não `static`). Se nenhum ancestral posicionado for encontrado, ele é posicionado em relação ao `<html>`. As propriedades `top`, `right`, `bottom` e `left` controlam seu deslocamento.

position: absolute;

O elemento é removido do fluxo normal do documento e posicionado em relação à viewport (janela do navegador). Ele permanece na mesma posição mesmo quando a página é rolada, ideal para cabeçalhos ou menus fixos.

position: fixed;

O elemento é posicionado de forma relativa até que sua posição de rolagem atinja um limite especificado (definido por `top`, `right`, `bottom` ou `left`), após o qual ele se torna fixo na tela. Útil para elementos que "grudam" ao rolar.

position: sticky;

Define a distância do elemento em relação à borda superior de seu contêiner posicionado (para `absolute`, `fixed`, `relative`, `sticky`). `0` o alinha perfeitamente ao topo.

top: 0;

Define a distância do elemento em relação à borda direita de seu contêiner posicionado. `0` o alinha perfeitamente à direita.

right: 0;

Define a distância do elemento em relação à borda inferior de seu contêiner posicionado. `0` o alinha perfeitamente à base.

bottom: 0;

Define a distância do elemento em relação à borda esquerda de seu contêiner posicionado. `0` o alinha perfeitamente à esquerda.

left: 0;

Controla a ordem de empilhamento de elementos posicionados. Elementos com um `z-index` maior aparecerão acima de elementos com um `z-index` menor. Funciona apenas em elementos com `position` diferente de `static`.

z-index: 100;

Remove o elemento do fluxo normal do documento e o posiciona à esquerda de seu contêiner, permitindo que outros conteúdos fluam ao redor dele. Usado historicamente para layouts de múltiplas colunas.

float: left;

Remove o elemento do fluxo normal do documento e o posiciona à direita de seu contêiner, permitindo que outros conteúdos fluam ao redor dele.

float: right;

Impede que o elemento seja posicionado ao lado de elementos flutuantes anteriores, tanto à esquerda quanto à direita. Ele força o elemento a começar em uma nova linha abaixo de todos os elementos flutuantes.

clear: both;

Impede que o elemento seja posicionado ao lado de elementos flutuantes à esquerda. Ele força o elemento a começar em uma nova linha abaixo de qualquer elemento flutuante à esquerda.

clear: left;

Quando aplicado a um contêiner pai, esta propriedade pode "conter" os elementos flutuantes dentro dele, evitando que o contêiner colapse. É uma técnica comum de "clearfix" para garantir que o pai envolva corretamente seus filhos flutuantes.

overflow: hidden;

Transforma o elemento em um contêiner flexível, ativando o contexto Flexbox para seus filhos diretos (itens flex). Os itens flex se organizarão em uma única linha por padrão.

display: flex;

Define a direção principal dos itens flex para horizontal (da esquerda para a direita em idiomas LTR). Este é o comportamento padrão do Flexbox.

flex-direction: row;

Define a direção principal dos itens flex para vertical (de cima para baixo). Os itens serão empilhados um abaixo do outro.

flex-direction: column;

Permite que os itens flex quebrem para a próxima linha (ou coluna, dependendo de `flex-direction`) se não houver espaço suficiente no contêiner. O padrão é `nowrap`, que tenta manter todos os itens em uma única linha/coluna.

flex-wrap: wrap;

Alinha os itens flex ao longo do eixo principal (horizontal por padrão) do contêiner flex. `center` centraliza os itens. Outras opções incluem `flex-start`, `flex-end`, `space-between`, `space-around`, `space-evenly`.

justify-content: center;

Alinha os itens flex ao longo do eixo cruzado (vertical por padrão) do contêiner flex. `center` centraliza os itens verticalmente. Outras opções incluem `flex-start`, `flex-end`, `stretch`, `baseline`.

align-items: center;

Alinha os itens flex ao início do eixo principal do contêiner flex. Em `row`, os itens se alinham à esquerda.

justify-content: flex-start;

Alinha os itens flex ao final do eixo principal do contêiner flex. Em `row`, os itens se alinham à direita.

justify-content: flex-end;

Centraliza os itens flex ao longo do eixo principal do contêiner flex.

justify-content: center;

Distribui o espaço extra uniformemente entre os itens flex. O primeiro item é alinhado ao início e o último ao final do contêiner.

justify-content: space-between;

Distribui o espaço extra uniformemente ao redor dos itens flex, resultando em metade do espaço nas extremidades do contêiner e espaço total entre os itens.

justify-content: space-around;

Distribui o espaço extra de forma que o espaço entre cada par de itens e o espaço entre os itens e as bordas do contêiner sejam iguais.

justify-content: space-evenly;

Estica os itens flex para preencher a altura total do contêiner flex ao longo do eixo cruzado, desde que não tenham uma altura explícita definida. Este é o comportamento padrão.

align-items: stretch;

Alinha os itens flex ao início do eixo cruzado do contêiner flex. Em `row`, os itens se alinham ao topo.

align-items: flex-start;

Alinha os itens flex ao final do eixo cruzado do contêiner flex. Em `row`, os itens se alinham à base.

align-items: flex-end;

Centraliza os itens flex ao longo do eixo cruzado do contêiner flex. Em `row`, os itens se centralizam verticalmente.

align-items: center;

Alinha os itens flex de forma que suas linhas de base de texto fiquem alinhadas ao longo do eixo cruzado.

align-items: baseline;

Quando há múltiplas linhas de itens flex (devido a `flex-wrap: wrap;`), esta propriedade alinha essas linhas como um grupo dentro do contêiner flex. `center` centraliza todas as linhas verticalmente. Similar a `justify-content` mas para o eixo cruzado e múltiplas linhas.

align-content: center;

Propriedade abreviada para `flex-grow: 1; flex-shrink: 1; flex-basis: 0%;`. Faz com que o item flex cresça e encolha para preencher o espaço disponível igualmente entre os outros itens flexíveis. Cada item com `flex: 1;` terá o mesmo tamanho relativo.

flex: 1;

Propriedade abreviada que faz com que o item flex cresça o dobro dos itens com `flex: 1;`. `flex-grow: 2; flex-shrink: 1; flex-basis: 0%;`.

flex: 2;

Define a capacidade do item flex de crescer para ocupar o espaço extra disponível no contêiner. Um valor de `1` significa que ele ocupará uma parte proporcional do espaço extra.

flex-grow: 1;

Define a capacidade do item flex de encolher quando não há espaço suficiente no contêiner. Um valor de `0` impede que o item encolha abaixo de seu `flex-basis` (ou conteúdo mínimo).

flex-shrink: 0;

Define o tamanho inicial de um item flex antes que qualquer espaço extra seja distribuído. Pode ser um valor fixo como `200px` ou um percentual.

flex-basis: 200px;

Permite sobrescrever a propriedade `align-items` do contêiner flex para um item flex individual. `center` centraliza este item específico verticalmente, independentemente de como os outros itens estão alinhados.

align-self: center;

Transforma o elemento em um contêiner de grade, ativando o contexto CSS Grid para seus filhos diretos (itens de grade). Permite definir linhas e colunas explícitas para o layout.

display: grid;

Define três colunas no grid, onde `1fr` significa uma fração do espaço disponível. Cada coluna ocupará uma parte igual do espaço restante do contêiner.

grid-template-columns: 1fr 1fr 1fr;

Define duas colunas: a primeira com uma largura fixa de 200 pixels e a segunda ocupando o restante do espaço disponível (`1fr`).

grid-template-columns: 200px 1fr;

Uma função abreviada que cria três colunas, cada uma ocupando uma fração igual do espaço disponível. Equivalente a `1fr 1fr 1fr`.

grid-template-columns: repeat(3, 1fr);

Define três linhas no grid: a primeira e a última linha se ajustam automaticamente ao conteúdo (`auto`), e a linha do meio ocupa o restante do espaço disponível (`1fr`).

grid-template-rows: auto 1fr auto;

Define o espaçamento (gutter) de 20 pixels entre as linhas e colunas do grid. É uma propriedade abreviada para `grid-row-gap` e `grid-column-gap`.

gap: 20px;

Inicia a definição de áreas nomeadas dentro do layout do grid. Permite criar layouts visuais de forma intuitiva, atribuindo nomes a blocos de células.

grid-template-areas:

Define a primeira linha do grid como uma área chamada "header" que se estende por três colunas. As aspas indicam uma linha, e os nomes dentro delas representam as células.

  "header header header"

Define a segunda linha do grid com três células: a primeira é uma "sidebar" e as duas seguintes são "main".

  "sidebar main main"

Define a terceira e última linha do grid como uma área chamada "footer" que se estende por três colunas. O ponto e vírgula finaliza a declaração de `grid-template-areas`.

  "footer footer footer";

Atribui um item de grid a uma área nomeada previamente definida em `grid-template-areas`. O elemento com esta propriedade ocupará todas as células da área "header".

grid-area: header;

Faz com que um item de grid comece na linha de grade 1 e termine na linha de grade 3, ocupando, portanto, as colunas 1 e 2. O número após a barra é exclusivo.

grid-column: 1 / 3;

Faz com que um item de grid comece na linha de grade 2 e termine na linha de grade 4, ocupando, portanto, as linhas 2 e 3.

grid-row: 2 / 4;

Faz com que um item de grid ocupe duas colunas a partir de sua posição inicial. `span` é útil quando a posição inicial não é fixa.

grid-column: span 2;

Faz com que um item de grid ocupe três linhas a partir de sua posição inicial.

grid-row: span 3;

Propriedade abreviada para definir a posição de um item de grid usando `grid-row-start`, `grid-column-start`, `grid-row-end` e `grid-column-end`. Neste caso, o item começa na linha 1, coluna 1, e se estende até a linha 3 (exclusivo) e coluna 4 (exclusivo).

grid-area: 1 / 1 / 3 / 4;

Alinha o conteúdo de cada item de grid individualmente ao longo do eixo da linha (horizontal) dentro de sua própria célula de grid. `center` centraliza o conteúdo horizontalmente.

justify-items: center;

Alinha o conteúdo de cada item de grid individualmente ao longo do eixo da coluna (vertical) dentro de sua própria célula de grid. `center` centraliza o conteúdo verticalmente.

align-items: center;

Alinha o grid inteiro (as faixas de coluna) ao longo do eixo da linha (horizontal) dentro do contêiner de grid, quando há espaço extra. `center` centraliza o grid.

justify-content: center;

Alinha o grid inteiro (as faixas de linha) ao longo do eixo da coluna (vertical) dentro do contêiner de grid, quando há espaço extra. `center` centraliza o grid.

align-content: center;

Propriedade abreviada que define `justify-items` e `align-items` simultaneamente. `center` centraliza o conteúdo de cada item de grid tanto horizontal quanto verticalmente dentro de sua célula.

place-items: center;

Inicia um bloco de estilos que será aplicado somente quando a largura da viewport for igual ou menor que 768 pixels. Isso é comumente usado para direcionar estilos específicos para tablets e smartphones.

@media (max-width: 768px) {

Dentro de uma media query para dispositivos móveis, define a largura de um elemento com a classe `container` para 100%. Isso garante que o contêiner ocupe toda a largura disponível em telas menores.

  .container { width: 100%; }

Fecha o bloco de estilos da media query, indicando o fim das regras CSS condicionais.

}

Inicia um bloco de estilos que será aplicado somente quando a largura da viewport for igual ou maior que 769 pixels. Isso é comumente usado para direcionar estilos específicos para desktops e telas maiores.

@media (min-width: 769px) {

Dentro de uma media query para dispositivos maiores, define a largura de um elemento com a classe `container` para 750 pixels. Isso pode ser usado para limitar a largura do conteúdo em telas grandes.

  .container { width: 750px; }

Fecha o bloco de estilos da media query, indicando o fim das regras CSS condicionais.

}

Define a largura máxima de uma imagem para 100% de seu contêiner. Combinado com `height: auto;`, isso garante que a imagem nunca exceda a largura de seu pai e mantenha sua proporção original ao redimensionar.

max-width: 100%;

Define a altura de um elemento (geralmente uma imagem) para ajustar-se automaticamente, mantendo sua proporção original em relação à largura. Essencial para imagens responsivas.

height: auto;

Define o tamanho da fonte usando a função `calc()` para criar um tamanho fluido. O tamanho base é 16 pixels, e `0.5vw` (0.5% da largura da viewport) é adicionado, fazendo com que a fonte aumente ou diminua ligeiramente com o tamanho da tela.

font-size: calc(16px + 0.5vw);

Define a largura do elemento para 100% da largura da viewport (janela visível do navegador). Útil para elementos que devem ocupar toda a largura da tela.

width: 100vw;

Define a altura do elemento para 100% da altura da viewport (janela visível do navegador). Útil para criar seções de página inteira ou layouts "hero".

height: 100vh;

Define a largura do elemento para 50% da largura da viewport. As unidades `vw` e `vh` são ideais para criar elementos que escalam diretamente com o tamanho da tela.

width: 50vw;

Define a altura do elemento para 100% da altura da viewport. Garante que o elemento ocupe a altura total da tela.

height: 100vh;

Define o tamanho da fonte para 4% da largura da viewport. Isso faz com que o texto aumente ou diminua de tamanho de forma fluida conforme a largura da tela muda.

font-size: 4vw;

Define uma margem de 2% da altura da viewport em todos os lados do elemento. Permite que o espaçamento vertical se adapte ao tamanho da tela.

margin: 2vh;

Define a largura mínima que o elemento pode ter, mesmo que a viewport seja menor. Isso evita que o conteúdo se torne ilegível em telas muito pequenas, forçando uma rolagem horizontal se necessário.

min-width: 320px;

Aplica uma transição suave a todas as propriedades CSS que mudam de valor. A transição durará 0.3 segundos e usará a função de temporização `ease` (inicia e termina lentamente).

transition: all 0.3s ease;

Aplica uma transição de 0.5 segundos com temporização `linear` (velocidade constante) apenas para a propriedade `color`. Outras propriedades mudarão instantaneamente.

transition: color 0.5s linear;

Aplica uma transição à propriedade `transform` com uma duração de 0.3 segundos e uma função de temporização `cubic-bezier` personalizada. `cubic-bezier` permite criar curvas de aceleração e desaceleração complexas para transições mais expressivas.

transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Define um atraso de 0.2 segundos antes que a transição comece a ser executada. O elemento permanecerá no estado inicial por esse período.

transition-delay: 0.2s;

Define a duração total da transição para 0.5 segundos. Controla o tempo que leva para a propriedade mudar de seu estado inicial para o final.

transition-duration: 0.5s;

Move o elemento 50 pixels para a direita ao longo do eixo X. Valores negativos movem para a esquerda.

transform: translateX(50px);

Move o elemento 20 pixels para baixo ao longo do eixo Y. Valores negativos movem para cima.

transform: translateY(20px);

Rotaciona o elemento 45 graus no sentido horário em torno de seu ponto de origem (centro por padrão). Valores negativos rotacionam no sentido anti-horário.

transform: rotate(45deg);

Aumenta o tamanho do elemento em 20% (1.2 vezes seu tamanho original) em ambos os eixos X e Y. `scale(x, y)` permite escalar de forma diferente em cada eixo.

transform: scale(1.2);

Inclina o elemento 15 graus ao longo do eixo X, criando um efeito de distorção. `skewY()` inclina verticalmente.

transform: skewX(15deg);

Rotaciona o elemento 45 graus em torno do eixo X (horizontal), criando um efeito de inclinação para frente ou para trás.

transform: rotateX(45deg);

Rotaciona o elemento 45 graus em torno do eixo Y (vertical), criando um efeito de virar para os lados.

transform: rotateY(45deg);

Rotaciona o elemento 45 graus em torno do eixo Z (profundidade), o que é equivalente a `rotate(45deg)` em 2D.

transform: rotateZ(45deg);

Aplica uma perspectiva de 1000 pixels ao elemento antes de rotacioná-lo 45 graus no eixo X. A propriedade `perspective` (aplicada ao pai ou como uma função de `transform`) é crucial para criar a ilusão de profundidade em transformações 3D.

transform: perspective(1000px) rotateX(45deg);

Aplicada a um elemento pai, esta propriedade garante que os filhos 3D do elemento sejam posicionados no mesmo espaço 3D, em vez de serem achatados no plano 2D. Essencial para criar cenas 3D complexas com múltiplos elementos.

transform-style: preserve-3d;

Inicia a definição de uma animação CSS chamada `slideIn`. Dentro deste bloco, você define os estágios (keyframes) da animação usando percentagens ou as palavras-chave `from` (0%) e `to` (100%).

@keyframes slideIn {

Define o estado inicial da animação (0%). Neste caso, o elemento começa 100% da sua largura fora da tela à esquerda.

  from { transform: translateX(-100%); }

Define o estado final da animação (100%). Neste caso, o elemento termina em sua posição original (sem deslocamento horizontal).

  to { transform: translateX(0); }

Fecha o bloco de definição da animação `@keyframes`.

}

Aplica a animação `slideIn` ao elemento. A animação terá uma duração de 0.5 segundos e usará a função de temporização `ease-in-out` (inicia e termina lentamente, acelera no meio). Esta é uma propriedade abreviada que inclui `animation-name`, `animation-duration`, `animation-timing-function`, entre outros.

animation: slideIn 0.5s ease-in-out;

Aplica estilos quando o cursor do mouse está sobre o elemento. Neste exemplo, a cor do texto muda para azul ao passar o mouse.

:hover { color: blue; }

Aplica estilos quando o elemento está sendo ativado (por exemplo, clicado por um mouse ou tocado em um dispositivo touchscreen). Neste exemplo, o elemento encolhe ligeiramente ao ser ativado.

:active { transform: scale(0.95); }

Aplica estilos quando o elemento (geralmente um campo de formulário ou link) recebe o foco, seja por tabulação ou clique. Neste exemplo, uma borda azul é adicionada para indicar o foco.

:focus { outline: 2px solid blue; }

Aplica estilos a links (<a>) que já foram visitados pelo usuário. Por razões de privacidade, as propriedades que podem ser alteradas são limitadas (principalmente `color`).

:visited { color: purple; }

Aplica estilos a links (<a>) que ainda não foram visitados pelo usuário. É o estado inicial de um link.

:link { color: blue; }

Seleciona o primeiro elemento filho de seu pai. Neste exemplo, o primeiro filho de qualquer elemento pai terá o texto em negrito.

:first-child { font-weight: bold; }

Seleciona o último elemento filho de seu pai. Útil para remover margens ou paddings desnecessários no final de uma lista ou grupo de elementos.

:last-child { margin-bottom: 0; }

Seleciona todos os elementos filhos que estão em posições ímpares (1º, 3º, 5º, etc.) de seu pai. Comumente usado para criar listras em tabelas ou listas (zebra-striping).

:nth-child(odd) { background: #f0f0f0; }

Seleciona todos os elementos filhos que estão em posições pares (2º, 4º, 6º, etc.) de seu pai. Complementa o estilo de zebra-striping.

:nth-child(even) { background: #fff; }

Seleciona o terceiro elemento filho de seu pai. O número dentro dos parênteses especifica a posição exata do filho a ser selecionado.

:nth-child(3) { color: red; }

Aplica estilos a elementos de input de rádio ou checkbox quando eles estão marcados (selecionados). Neste exemplo, o elemento aumenta de tamanho quando marcado.

:checked { transform: scale(1.2); }

Aplica estilos a elementos de formulário que estão desabilitados (com o atributo `disabled`). Neste exemplo, o elemento fica semi-transparente para indicar que não pode ser interagido.

:disabled { opacity: 0.5; }

Aplica estilos a elementos de formulário que estão habilitados (sem o atributo `disabled`). Neste exemplo, o cursor muda para um ponteiro para indicar que o elemento é interativo.

:enabled { cursor: pointer; }

Aplica estilos a campos de formulário que possuem o atributo `required`, indicando que são de preenchimento obrigatório. Neste exemplo, uma borda vermelha é adicionada.

:required { border: 2px solid red; }

Aplica estilos a campos de formulário cujo conteúdo é considerado válido de acordo com suas regras de validação (por exemplo, um email bem formatado em um campo `type="email"`).

:valid { border-color: green; }

Insere conteúdo gerado por CSS antes do conteúdo real de um elemento. O valor da propriedade `content` é obrigatório. Comumente usado para ícones, aspas ou marcadores decorativos.

::before { content: "→"; }

Insere conteúdo gerado por CSS depois do conteúdo real de um elemento. Similar a `::before`, mas posiciona o conteúdo no final.

::after { content: "←"; }

Aplica estilos à primeira linha de texto de um elemento de bloco. A "primeira linha" é determinada pela largura do elemento e não pelo HTML. Neste exemplo, a primeira linha fica em negrito.

::first-line { font-weight: bold; }

Aplica estilos à primeira letra do texto de um elemento de bloco. Comumente usado para criar efeitos de "drop cap" ou letras capitulares, aumentando o tamanho da primeira letra.

::first-letter { font-size: 2em; }

Aplica estilos ao texto que o usuário selecionou (destacou) em um documento. Neste exemplo, o fundo do texto selecionado ficará amarelo. As propriedades que podem ser alteradas são limitadas.

::selection { background: yellow; }

Aplica um efeito de desfoque gaussiano ao elemento. Um valor de `5px` indica que os pixels serão desfocados em um raio de 5 pixels. Valores maiores resultam em mais desfoque.

filter: blur(5px);

Ajusta o brilho do elemento. Um valor de `1.2` (ou 120%) aumenta o brilho em 20%. `1` é o brilho normal, `0` torna o elemento totalmente preto.

filter: brightness(1.2);

Ajusta o contraste do elemento. Um valor de `1.5` (ou 150%) aumenta o contraste em 50%. `1` é o contraste normal, `0` torna o elemento cinza.

filter: contrast(1.5);

Converte as cores do elemento para uma escala de cinza. Um valor de `100%` remove completamente a saturação das cores, tornando-o em preto e branco. `0%` mantém as cores originais.

filter: grayscale(100%);

Aplica um efeito sépia ao elemento, dando-lhe um tom marrom-avermelhado antigo. Um valor de `50%` aplica metade do efeito total.

filter: sepia(50%);

Rotaciona as cores do elemento no círculo de cores. `90deg` desloca a matiz em 90 graus, alterando as cores de forma dramática. `0deg` ou `360deg` não tem efeito.

filter: hue-rotate(90deg);

Aplica uma sombra suave ao redor da caixa do elemento. Os valores são: deslocamento X (0), deslocamento Y (2px), raio de desfoque (4px) e cor (`rgba(0,0,0,0.1)` - preto com 10% de opacidade).

box-shadow: 0 2px 4px rgba(0,0,0,0.1);

Aplica uma sombra de intensidade média à caixa do elemento, com maior deslocamento Y e raio de desfoque, e 20% de opacidade.

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Aplica uma sombra mais proeminente à caixa do elemento, com maior deslocamento, desfoque e 30% de opacidade, criando um efeito de elevação mais acentuado.

box-shadow: 0 8px 16px rgba(0,0,0,0.3);

Aplica uma sombra ao texto do elemento. Os valores são: deslocamento X (2px), deslocamento Y (2px), raio de desfoque (4px) e cor (`rgba(0,0,0,0.3)`).

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

Aplica uma sombra interna (inset) à caixa do elemento, criando um efeito de profundidade ou de elemento "pressionado". O termo `inset` é adicionado antes dos outros valores.

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Aplica um gradiente linear que se estende em um ângulo de 45 graus, transicionando da cor `#ff7e5f` para `#feb47b`. O ângulo pode ser especificado em `deg`, `grad`, `rad` ou `turn`.

background: linear-gradient(45deg, #ff7e5f, #feb47b);

Aplica um gradiente radial com forma de círculo, começando com a cor `#ff7e5f` no centro e transicionando para `#feb47b` nas bordas.

background: radial-gradient(circle, #ff7e5f, #feb47b);

Aplica um gradiente cônico que gira em torno de um ponto central, criando um efeito de "fatia de pizza". `from 0deg` define o ponto de partida da rotação. As cores são distribuídas angularmente.

background: conic-gradient(from 0deg, #ff7e5f, #feb47b, #ff7e5f);

Cria um padrão de gradiente linear que se repete. Neste exemplo, ele cria listras de 10px em `#ff7e5f` e 10px em `#feb47b`, repetindo-se em um ângulo de 45 graus.

background: repeating-linear-gradient(45deg, #ff7e5f, #ff7e5f 10px, #feb47b 10px, #feb47b 20px);

Recorta o elemento em uma forma circular. `circle(50%)` cria um círculo com raio de 50% do menor lado do elemento, centralizado. O conteúdo fora do caminho de recorte é invisível.

clip-path: circle(50%);

Recorta o elemento em uma forma poligonal definida por uma lista de coordenadas de pontos. Neste exemplo, cria uma forma de diamante.

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

Recorta o elemento em uma forma elíptica. `ellipse(rx ry at x y)` define os raios horizontal e vertical e a posição do centro da elipse.

clip-path: ellipse(50% 40% at 50% 50%);

Aplica uma imagem como máscara para o elemento. A imagem da máscara (geralmente um PNG com transparência ou SVG) define quais partes do elemento são visíveis e quais são transparentes.

mask-image: url("mask.png");

Aplica um efeito de filtro à área de fundo *atrás* do elemento. Neste exemplo, o conteúdo visível através do elemento será desfocado em 5 pixels, criando um efeito de vidro fosco. Requer suporte do navegador e geralmente é usado com um fundo semi-transparente no elemento.

backdrop-filter: blur(5px);

O seletor `:root` representa o elemento raiz do documento (o elemento `<html>`). Declarar variáveis aqui as torna acessíveis globalmente em todo o documento CSS.

:root {

Declara uma variável CSS chamada `--primary-color` e atribui a ela o valor hexadecimal `#3498db` (um tom de azul). Nomes de variáveis CSS começam com dois hífens (`--`).

  --primary-color: #3498db;

Declara uma variável CSS chamada `--secondary-color` e atribui a ela o valor `#2ecc71` (um tom de verde).

  --secondary-color: #2ecc71;

Declara uma variável CSS para definir o tamanho base da fonte, facilitando a consistência tipográfica em todo o projeto.

  --font-size-base: 16px;

Declara uma variável CSS para definir uma unidade de espaçamento, útil para criar um sistema de espaçamento consistente e baseado em uma grade.

  --spacing-unit: 8px;

Fecha o bloco de declaração de variáveis CSS dentro do seletor `:root`.

}

Aplica o valor da variável `--primary-color` à propriedade `color`. A função `var()` é usada para acessar o valor de uma custom property.

color: var(--primary-color);

Aplica o valor da variável `--font-size-base` à propriedade `font-size`, garantindo que o texto use o tamanho base definido.

font-size: var(--font-size-base);

Aplica o valor da variável `--spacing-unit` à propriedade `margin`, usando a unidade de espaçamento consistente.

margin: var(--spacing-unit);

Utiliza a função `calc()` para realizar operações matemáticas com variáveis CSS. Neste caso, o padding é definido como o dobro do valor de `--spacing-unit`, resultando em `16px`.

padding: calc(var(--spacing-unit) * 2);

Usa a variável `--primary-color`. Se a variável não estiver definida, o valor de fallback `#333` (cinza escuro) será usado. Isso aumenta a robustez do CSS.

color: var(--primary-color, #333);

Usa a variável `--font-size-base` com um valor de fallback de `16px` caso a variável não seja encontrada ou esteja indefinida.

font-size: var(--font-size-base, 16px);

Demonstra o uso de fallbacks aninhados. Tenta usar `--bg-color`. Se não estiver definida, tenta `--white`. Se `--white` também não estiver definida, usa o valor final `#fff`.

background: var(--bg-color, var(--white, #fff));

Inicia um bloco de estilos que será aplicado se o sistema operacional do usuário estiver configurado para o modo escuro. Permite criar temas dinâmicos que se adaptam às preferências do usuário.

@media (prefers-color-scheme: dark) {

Dentro da media query de modo escuro, redefine o valor da variável `--primary-color` para um tom de azul mais claro, adequado para fundos escuros.

  --primary-color: #5dade2;

Define uma variável `--bg-color` para um tom de cinza muito escuro, que será usado como cor de fundo no modo escuro.

  --bg-color: #1a1a1a;

Fecha o bloco de estilos da media query, encerrando as regras condicionais para o modo escuro.

}