Fundamentos de CSS

O HTML descreve conteúdo e significado. CSS, sigla de folhas de estilo em cascata, descreve a apresentação: cores, fontes, espaçamento, bordas e fundos. Alterar uma folha de estilo pode dar ao mesmo HTML uma aparência diferente sem mudar seus títulos, parágrafos ou links.

Leia uma regra

p {
  color: navy;
  font-size: 18px;
}

O seletor p corresponde a parágrafos. As chaves delimitam o bloco de declarações. Cada declaração tem uma propriedade, dois-pontos, um valor e um ponto e vírgula. Aqui, color e font-size são propriedades; navy e 18px são valores. Quebras de linha e espaços entre essas partes tornam o código mais fácil de ler sem alterar seu efeito.

Um ponto e vírgula separa uma declaração da seguinte. O último é opcional, mas mantê-lo evita erros quando você adiciona outra linha. Em color: navy font-size: 18px;, o navegador lê um único valor de cor inválido. Ele não consegue recuperar as duas declarações pretendidas, então nenhum dos dois estilos é definido por esse texto.

Vincule o CSS

Uma folha de estilo externa é um arquivo CSS separado, vinculado a partir do head do HTML:

<link rel="stylesheet" href="css/styles.css">

Esse caminho indica que uma pasta chamada css fica ao lado do arquivo HTML e contém styles.css. Um arquivo externo pode estilizar várias páginas. Salvar uma alteração nele atualiza as regras que essas páginas carregam.

Um elemento style no head contém regras para uma página. Um atributo style em linha contém declarações para um elemento, como em <p style="color: crimson;">Hello.</p>. Folhas de estilo externas geralmente são mais fáceis de manter. Declarações normais em linha também têm precedência sobre regras normais de folhas de estilo do autor, o que pode dificultar alterações posteriores.

Para obter um primeiro resultado, coloque body { font-family: Arial, sans-serif; } e h1 { color: darkslateblue; } no arquivo vinculado. Recarregue a página. O corpo do texto usa Arial quando disponível, com uma fonte sem serifa como alternativa; o título muda de cor. Controles como botões podem manter sua própria fonte do navegador até que você os faça herdá-la explicitamente.

Encontre erros de sintaxe e de caminho

Navegadores ignoram declarações inválidas e continuam. color: 12px; é inválido porque uma medida de comprimento não é uma cor. font-size: 16 px; é inválido porque o número e a unidade devem estar juntos. Uma propriedade escrita incorretamente também é ignorada. Uma declaração de borda válida no mesmo bloco ainda pode funcionar, então uma alteração visível não prova que todas as declarações são válidas.

Comentários CSS usam /* Header styles */ e podem ocupar várias linhas. // não inicia um comentário CSS; pode fazer com que o código seguinte seja ignorado. Nomes de propriedades e valores comuns de palavras-chave não diferenciam maiúsculas de minúsculas; por convenção, mantenha-os em minúsculas. Nomes de classes e caminhos de arquivos devem corresponder à grafia e ao uso de maiúsculas e minúsculas reais.

Se nenhum estilo aparecer, verifique a requisição no painel Rede. Um caminho errado como style.css pode retornar 404 mesmo que a própria página HTML abra normalmente.

Trate propriedades abreviadas como configurações completas

Uma propriedade abreviada define várias propriedades relacionadas de uma vez. margin: 10px 20px; define as quatro margens. Partes omitidas voltam a seus valores iniciais: background-image: url("sky.jpg"); seguido de background: lightblue; remove a imagem. Coloque primeiro a propriedade abreviada e depois as exceções individuais que devem ser mantidas.

Uma página HTML simples ainda tem títulos grandes, espaçamento entre parágrafos, marcadores de lista e links sublinhados. Eles vêm da folha de estilo do agente de usuário, o CSS embutido do navegador. Seus estilos começam a partir desses padrões; uma página sem estilização própria não é uma página sem regras CSS.

Escolha o significado antes da aparência

Padrões típicos incluem uma margem de 8px no body, margens verticais de 1em nos parágrafos e 40px de preenchimento interno no lado inicial das listas. Os padrões de títulos incluem 2em para h1 e 1.5em para h2, com margens verticais de 0.67em para h1. Texto de importância acentuada fica em negrito; texto enfatizado fica em itálico. Links não visitados geralmente são azuis e links visitados, roxos. Configurações e implementações dos navegadores podem afetar os padrões, então inspecione a página real quando a precisão for importante.

O tamanho padrão do texto costuma ser 16px, com uma fonte escolhida nas configurações do navegador. Leitores podem alterar esse tamanho. Tamanhos de fonte relativos podem acompanhar essa escolha.

Escolha um elemento HTML por seu significado e depois estilize-o. Se um h2 parecer grande demais, use h2 { font-size: 1.25rem; }. Escolher um h4 apenas para obter letras menores mudaria a estrutura de títulos. Alterar o tamanho no CSS mantém intacto o significado do título de segundo nível.

Os padrões também determinam como os elementos ocupam espaço. Parágrafos e seções normalmente formam caixas de bloco. Elementos span e links normalmente fluem dentro das linhas. Itens de lista têm display: list-item, o que lhes dá uma caixa de nível de bloco e um marcador. Uma alteração de display no CSS muda o comportamento da caixa, preservando o significado HTML do elemento.

Redefina apenas o que você pretende

Uma redefinição de estilos remove padrões selecionados. body { margin: 0; } remove o espaço externo. Uma regra abrangente como * { margin: 0; padding: 0; } também remove o espaçamento dos parágrafos e o recuo das listas, que você precisará reconstruir. Uma abordagem de normalização mantém padrões úteis e ajusta inconsistências.

Controles de formulário frequentemente têm fontes atribuídas diretamente pelo navegador. Para fazê-los usar a mesma fonte da página, escreva:

button, input, select, textarea {
  font: inherit;
}

Comece o documento HTML com <!DOCTYPE html>. Isso seleciona o modo de padrões. Omitir a declaração de tipo de documento pode ativar o modo de compatibilidade, no qual comportamentos de compatibilidade antigos alteram alguns dimensionamentos e outros resultados do CSS.

Inspecione a propriedade que surpreende você

Clique com o botão direito em um elemento e escolha Inspecionar. O painel Estilos mostra as regras correspondentes, incluindo regras do navegador identificadas como estilos do agente de usuário. Uma declaração riscada perdeu para outra declaração; um aviso pode indicar CSS inválido. As declarações que prevalecem são escolhidas propriedade por propriedade, então uma regra pode perder sua cor e ainda fornecer seu preenchimento interno.

O painel Computado mostra os valores finais das propriedades e o conteúdo, o preenchimento interno, a borda e a margem do modelo de caixa. Se um título tiver um espaço inesperado, inspecione sua margem antes de adicionar preenchimento interno a outro elemento. Teste uma alteração diretamente nas ferramentas do desenvolvedor e depois copie a regra que funciona para sua folha de estilo: alterações feitas na inspeção desaparecem ao recarregar a página.

Quando um estilo falhar, siga uma ordem útil: verifique se a folha de estilo carregou, se o seletor corresponde, se a declaração é válida, se ela prevalece e se a propriedade afeta esse tipo de caixa. Um width: 200px válido ainda não dimensiona um span comum exibido em linha.

Um seletor responde a uma pergunta prática: quais elementos devem receber estas declarações? Comece pela correspondência mais simples que expresse a função desejada. Uma classe pode ser reutilizada em muitos elementos sem vincular o estilo a uma única posição na página.

Selecione nomes e atributos

Um seletor de tipo é o nome de um elemento. Um seletor de classe começa com um ponto; um seletor de ID começa com #. A pontuação pertence ao seletor CSS, não ao valor do atributo HTML. Escreva <p class="warning">, não <p class=".warning">.

Um elemento pode ter várias classes separadas por espaços. Tanto <p class="warning"> quanto <div class="box warning"> correspondem a .warning. Um ID deve ser único dentro de uma página. Sua alta especificidade também dificulta sobrescrever estilos baseados em ID, então classes costumam ser a principal ferramenta para estilos reutilizáveis.

Use nomes que descrevam uma função, como .error-message ou .product-card. Um nome como .red-text se torna enganoso se o design mudar para outra cor. Nomes de classes diferenciam maiúsculas de minúsculas: .Warning e .warning são diferentes. Um nome que começa com um dígito precisa ser escapado em um seletor CSS; escolher .three-columns evita a forma inválida sem escape .3-columns.

Exija várias condições em um elemento

Escrever seletores juntos cria um seletor composto. O mesmo elemento deve satisfazer todas as partes. p.intro corresponde a parágrafos que têm a classe intro. .card.featured corresponde a um elemento com ambas as classes.

<p class="note important">Doors open at 19:00.</p>
<p class="note">Bring your ticket.</p>

.note { color: #333333; }
.important { font-weight: bold; }
p.note.important { border-left: 4px solid crimson; }

Primeiro encontre as correspondências. Ambos os parágrafos têm note, então ambos recebem texto cinza-escuro. Apenas o primeiro tem important, então só ele fica em negrito. O seletor composto adiciona a borda esquerda a esse mesmo primeiro parágrafo porque ele é um p com ambas as classes. Nenhum elemento envolvente adicional é necessário.

Um espaço muda a tarefa: p .intro seleciona um elemento com a classe intro dentro de um parágrafo. Ele não seleciona o próprio parágrafo. Mantenha as partes juntas quando descreverem o mesmo elemento.

Compartilhe um bloco de declarações

Uma vírgula cria uma lista de seletores:

h1, h2, h3 { font-family: Georgia, serif; }

Cada seletor corresponde independentemente a seu nível de título. Sem as vírgulas, h1 h2 h3 buscaria um h3 dentro de um h2 dentro de um h1.

Um seletor inválido em uma lista comum de seletores pode invalidar a regra inteira. h1, h2..title, h3 não estiliza nenhum desses títulos porque o ponto duplo é inválido. Quando uma regra compartilhada parece ausente, verifique todos os seletores da lista, não apenas o do elemento inspecionado.

Algumas condições de estilização já estão presentes nos atributos HTML. Outras dependem do que o leitor está fazendo ou da posição de um elemento entre seus irmãos. O CSS pode corresponder a essas condições sem adicionar uma classe para cada uma.

Selecione um atributo ou seu valor

Seletores de atributo usam colchetes. [alt] corresponde à presença de um atributo, mesmo que seu valor esteja vazio. input[type="email"] exige o valor exato do atributo.

Adicione i antes do colchete de fechamento para ignorar a diferença entre maiúsculas e minúsculas, como em a[href$=".pdf" i]. Ele também alcança um link terminado em .PDF. A correspondência de palavra inteira impede que note corresponda acidentalmente a uma palavra de classe mais longa, como notebook.

Selecione um estado ou uma posição

Uma pseudoclasse usa um par de dois-pontos: :hover, :focus, :checked ou :disabled. :focus-visible seleciona um elemento com foco quando o navegador determina que um indicador visível é necessário, geralmente durante a navegação por teclado.

Um link pode estar visitado e com o ponteiro sobre ele ao mesmo tempo. Para regras concorrentes com a mesma especificidade, escreva os estados de link nesta ordem: :link, :visited, :focus, :hover, :active. Caso contrário, uma regra posterior de cor de visitado prevaleceria sobre uma regra anterior de cor ao passar o ponteiro em um link visitado. Os navegadores restringem :visited a certas alterações de cor para proteger a privacidade; definir seu peso de fonte não funciona, e a transparência não pode revelar o histórico de visitas.

Pseudoclasses estruturais contam irmãos. :first-child significa o primeiro elemento filho de seu elemento pai. Em <article><h2>News</h2><p>Update</p></article>, p:first-child não corresponde a nada. p:first-of-type corresponde a esse parágrafo.

:nth-child(3) seleciona o terceiro filho. odd seleciona as posições 1, 3, 5; even seleciona 2, 4, 6. Em :nth-child(3n+1), comece com n = 0, depois 1, 2 e 3: as posições correspondentes são 1, 4, 7 e 10. li:not(:last-child) exclui o último item, sendo útil para separadores apenas entre itens.

Estilize uma parte ou adicione uma indicação

Um pseudoelemento usa dois pares de dois-pontos. ::first-line e ::first-letter estilizam partes do texto; ::marker estiliza marcadores de lista, ::placeholder estiliza a orientação de um campo e ::selection estiliza texto selecionado. As formas antigas com um par de dois-pontos para before, after, first-line e first-letter ainda funcionam.

.required::after {
  content: " *";
  color: crimson;
}

::after cria conteúdo dentro do elemento selecionado, depois do conteúdo existente. ::before o cria antes. Ambos precisam de um valor de content; até content: "" cria uma caixa decorativa. Textos essenciais pertencem ao HTML, onde continuam sendo conteúdo real do documento. Use esses pseudoelementos para decoração ou pequenas indicações, pois o texto gerado não pode ser selecionado ou copiado de forma confiável como o texto HTML.

Elementos HTML formam uma árvore. Um elemento diretamente dentro de outro é seu filho; qualquer elemento aninhado dentro dele é um descendente. Elementos que compartilham um elemento pai são irmãos. Um combinador conecta seletores por uma dessas relações.

Acompanhe a relação até o alvo

A parte mais à direita nomeia o elemento que recebe as declarações. h2 + p estiliza o parágrafo, não o título. Ambos os combinadores de irmãos olham para a frente entre os irmãos; nenhum deles seleciona um elemento pai ou um irmão anterior.

Acompanhe uma lista aninhada

<ul class="menu">
  <li>Guides</li>
  <li>Topics
    <ul>
      <li>Typography</li>
    </ul>
  </li>
</ul>

.menu li corresponde aos três itens de lista porque os três são descendentes da lista externa. .menu > li corresponde apenas a “Guides” e “Topics”: o elemento pai deles é a lista com a classe menu. O elemento pai do item “Typography” é o ul interno, que não tem essa classe.

Essa distinção importa quando itens de nível superior precisam de preenchimento interno amplo, mas itens aninhados precisam de espaçamento compacto. Um seletor de descendente alcança todos os níveis, a menos que outra condição o restrinja.

Acompanhe os irmãos seguintes

<article>
  <h2>Opening hours</h2>
  <p>Visit in the morning.</p>
  <aside>Closed on holidays.</aside>
  <p>Booking is optional.</p>
</article>

h2 + p corresponde a “Visite pela manhã.” Ele não pula o aside para encontrar outro parágrafo. h2 ~ p corresponde a ambos os parágrafos porque os dois vêm depois do título e compartilham seu elemento pai. Se um parágrafo estivesse dentro do aside, ele não seria irmão do título e, por esse motivo, não corresponderia a nenhum dos dois seletores.

Combine relações sem alcançar elementos indesejados

.sidebar > ul a:hover corresponde a links com o ponteiro sobre eles em qualquer nível dentro de um ul cujo elemento pai direto tem a classe sidebar. Leia da direita para a esquerda: um link com o ponteiro sobre ele; dentro de uma lista; essa lista diretamente dentro da barra lateral. O espaço permite elementos intermediários entre a lista e o link.

Combinadores não acrescentam especificidade. O elemento, a classe, o ID e outras partes de correspondência do seletor continuam acrescentando. Por isso, sequências longas podem tornar as regras mais difíceis de manter, embora os símbolos de relação não acrescentem pontos: alterar o aninhamento do HTML pode impedir suas correspondências. Uma classe descritiva no alvo, como .menu-link, frequentemente expressa uma função reutilizável com mais clareza.

Quando uma regra não corresponder, inspecione a árvore real em vez de contar espaços visuais. Dois elementos podem aparecer lado a lado na tela e ter elementos pais diferentes no HTML. Comentários e espaços em branco não contam como elementos irmãos para esses combinadores.

A cascata escolhe a declaração que prevalece para cada propriedade de cada elemento. Ela não escolhe uma regra inteira e descarta todas as outras. Com p { color: gray; font-size: 18px; } e .lead { color: black; }, um parágrafo com a classe lead pode receber sua cor da regra de classe e seu tamanho da regra de tipo.

Compare na ordem correta

Primeiro, elimine as declarações que não se aplicam: seus seletores devem corresponder e quaisquer condições devem ser atendidas. Depois, compare origem e importância, incluindo a prioridade da camada de cascata. Estilos normais em linha do autor têm precedência sobre regras normais das folhas de estilo do autor. Quando as declarações ainda empatam nessas etapas anteriores, compare a especificidade; use a ordem de aparecimento para resolver um empate restante.

Duas regras .button de mesma prioridade que definem cores de fundo diferentes são resolvidas pela ordem: a posterior prevalece. Folhas de estilo vinculadas mais adiante no HTML também vêm depois nesses empates. Um arquivo chegar mais rápido pela rede não faz com que ele venha depois na cascata.

Entenda a importância antes de adicioná-la

Uma declaração em linha como style="color: purple;" prevalece sobre seletores normais de folhas de estilo do autor, mesmo seletores com IDs. Uma declaração de folha de estilo do autor com !important pode prevalecer sobre essa declaração normal em linha.

<p class="note" style="color: purple;">Check the time.</p>

p { color: gray !important; }
.note { color: blue; }

O parágrafo fica cinza. A importância é comparada antes da especificidade do seletor ou da vantagem normal do estilo em linha. Se a cor em linha também tiver !important, essa declaração importante em linha prevalecerá sobre a regra importante da folha de estilo do autor.

Para declarações importantes, a prioridade das origens se inverte: declarações importantes do navegador têm precedência sobre declarações importantes do usuário, que têm precedência sobre declarações importantes do autor. Isso protege regras que leitores ou navegadores precisam impor. Dentro de uma origem, a precedência de estilos em linha e de camadas ainda vem antes da especificidade e da ordem no código-fonte.

Usar !important para todo conflito cria substituições cada vez mais difíceis. Prefira um seletor mais simples ou uma ordem planejada. Sobrescrever regras de terceiros que você não pode editar pode justificar uma declaração importante; ela deve ser uma exceção consciente.

Agrupe regras em camadas de cascata

@layer reset, base, components;
@layer base {
  p { margin: 0 0 1rem; }
}

Isso declara a ordem das camadas antes de suas regras. Para declarações normais, camadas posteriores prevalecem sobre camadas anteriores, independentemente da especificidade do seletor. Regras normais fora de qualquer camada prevalecem sobre regras normais em camadas. Assim, uma regra de componente com baixa especificidade pode sobrescrever uma regra de base com alta especificidade sem adicionar IDs.

Declarações importantes invertem essa ordem das camadas: camadas anteriores prevalecem sobre posteriores, e declarações importantes em camadas prevalecem sobre declarações importantes fora de camadas. Essa inversão preserva proteções importantes nas camadas fundamentais. Ao investigar um conflito, estabeleça a origem, a importância e o grupo de camadas que prevalecem antes de gastar tempo contando partes de seletores.

A especificidade mede o peso de seleção do seletor. Compare-a apenas entre declarações que ainda empatam nas etapas anteriores da cascata, incluindo origem, importância, camada e prioridade de estilos em linha.

Conte três colunas

Escreva a especificidade como ID–CLASSE–TIPO, por exemplo, 0-1-1.

O seletor universal * e os combinadores não acrescentam nada. Para a[href^="https"]:focus, conte nenhum ID, duas partes de CLASSE (o atributo e :focus) e uma parte de TIPO (a). O resultado é 0-2-1.

Mais exemplos: .nav a é 0-1-1; ul li a:hover é 0-1-3; #main .card > h2 é 1-1-1; article p::first-line é 0-0-3. Um pseudoelemento conta com os tipos, embora seu nome comece com dois-pontos.

Compare a partir da esquerda

Compare os IDs primeiro. Se houver empate, compare CLASSE; se também houver empate, compare TIPO. Apenas triplas iguais passam para a ordem no código-fonte. São contagens separadas, não dígitos de um número decimal: 0-11-0 ainda perde para 1-0-0. Classes adicionais não são transportadas para um ID.

<nav id="site-nav">
  <a class="active" href="/">Home</a>
</nav>

#site-nav a { color: white; }
nav a.active { color: orange; }
.active { color: yellow; }

Suponha que essas sejam declarações normais na mesma camada do autor. Suas pontuações são 1-0-1, 0-1-2 e 0-1-0. A primeira prevalece, então o link fica branco. Sua coluna ID resolve a comparação antes que qualquer contagem de classes ou tipos importe.

#site-nav .active prevaleceria com 1-1-0, mas um design baseado em classes é mais fácil de ampliar: .site-nav a pode fornecer o estilo base, com .site-nav .active alterando o link ativo. Isso mantém a especificidade baixa e relativamente uniforme.

Conheça as exceções funcionais

:is(), :not() e :has() não acrescentam peso pela própria função. Seu argumento mais específico fornece o peso. Assim, li:not(.done) é 0-1-1, e :is(#intro, p) a é 1-0-1. Conte o seletor mais específico da lista de argumentos, não aquele que você considera visualmente mais próximo do elemento.

:where() e tudo o que está dentro dele sempre contribuem com zero. Portanto, :where(#main) p tem pontuação 0-0-1. Ele é útil para padrões que devem ser fáceis de sobrescrever.

A distância até um ancestral não conta. body h1 e html h1 têm pontuação 0-0-2, então uma declaração posterior resolve o empate. Estilos em linha são tratados antes da especificidade do seletor, e !important pertence à importância. Nenhum dos dois é outra parte comum de seletor a ser adicionada à tripla.

A herança permite que um filho receba um valor de seu elemento pai quando a propriedade normalmente é herdada e nenhuma declaração fornece um valor diferente para o filho. É por isso que uma regra no body pode estabelecer a cor e a fonte do texto para grande parte de uma página.

Separe o texto herdado das configurações de caixa

A maioria das propriedades de texto é herdada: color, propriedades de fonte, line-height, letter-spacing, text-align e text-transform. Estilos de lista e visibility também são herdados. Propriedades de caixa como margem, preenchimento interno, borda, largura, altura, fundos, exibição e dimensionamento da caixa não são.

body { color: #222222; font-family: Georgia, serif; }
h1, h2 { font-family: Arial, sans-serif; }
footer { color: #666666; }

O corpo do texto comum usa Georgia em cinza-escuro. Os títulos recebem sua família de fontes atribuída diretamente e mantêm a cor herdada. O texto do rodapé herda Georgia, enquanto sua cor muda localmente.

O fundo transparente de um filho deixa o fundo do elemento pai aparecer; isso não significa que o filho herdou a cor de fundo. Da mesma forma, filhos de uma caixa com borda não recebem automaticamente suas próprias bordas.

Atribuições diretas prevalecem sobre valores que seriam herdados

Com #content { color: red; } e p { color: blue; }, um parágrafo dentro da área de conteúdo fica azul. A especificidade do ID não compete com a regra do parágrafo porque as declarações selecionam elementos diferentes. O parágrafo já tem uma cor atribuída diretamente, então não precisa do vermelho herdado.

Os filhos geralmente herdam valores computados. Se uma seção tem font-size: 20px e seu filho tem font-size: 0.8em, o valor computado desse filho é 16px. Um parágrafo dentro dele herda 16px; ele não multiplica por 0.8 novamente. Uma altura de linha sem unidade é útil porque o valor herdado continua sendo um multiplicador para o tamanho da fonte de cada filho.

Escolha o significado de uma redefinição

Para CSS do autor, revert revela a estilização da origem do usuário ou do navegador. A diferença importa em um div: display: initial resulta no valor inicial inline da propriedade, enquanto display: revert restaura sua exibição block habitual do navegador. Um valor inicial pertence à propriedade CSS; um padrão do navegador pode depender do elemento HTML.

inherit funciona mesmo em uma propriedade que normalmente não é herdada, como border: inherit. button, input { font: inherit; } substitui as fontes atribuídas diretamente aos controles pela fonte de seu elemento pai. all: unset redefine quase todas as propriedades de uma vez, o que também remove aparências nativas úteis.

Uma aparente exceção é o sublinhado. text-decoration não é herdada, mas o sublinhado de um elemento pai é desenhado através de seus descendentes em linha. Definir text-decoration: none em um span aninhado não pode apagar a linha do elemento pai. Remova-a do elemento pai e aplique-a apenas ao texto que deve recebê-la.

color define a cor do texto. Fundos, bordas, contornos, decorações e sombras também aceitam valores de cor. A mesma cor pode ser especificada de várias formas; escolha uma notação que facilite entender a alteração pretendida.

Leia nomes e canais hexadecimais

O CSS tem cerca de 150 cores nomeadas, incluindo navy, tomato e rebeccapurple. Nomes são convenientes para testes rápidos, mas seus significados cotidianos podem surpreender: green é #008000, enquanto o verde puro e brilhante é lime, ou #00ff00. Valores exatos eliminam essa incerteza.

Uma cor hexadecimal de seis dígitos tem três pares de canais: vermelho, verde e azul. Cada par vai de 00 a ff, equivalente a 0 até 255. Todos em zero produzem preto; todos no máximo produzem branco. Pares iguais produzem um cinza, como em #808080.

A forma hexadecimal de três dígitos duplica cada dígito: #f0a se expande para #ff00aa. Ela não adiciona zeros. Uma cor como #1e90ff não pode ser abreviada porque nem todos os pares repetem seu dígito. Letras hexadecimais maiúsculas e minúsculas representam os mesmos valores.

Para converter um par, multiplique seu primeiro dígito por 16 e adicione o segundo. As letras de a a f significam 10 a 15. Para #1e90ff, 1e resulta em 30, 90 em 144 e ff em 255. A notação RGB correspondente é rgb(30 144 255). Código mais antigo pode usar vírgulas ou rgba(); essas formas ainda funcionam.

Descreva matiz ou transparência

hsl() especifica matiz, saturação e luminosidade. Matiz é um ângulo: 0 ou 360 é vermelho, 120 é verde e 240 é azul. A saturação vai de cinza em 0% a cor plena em 100%. A luminosidade vai de preto em 0% a branco em 100%. Uma matiz pura tem 100% de saturação e 50% de luminosidade, como em hsl(0 100% 50%). Alterar apenas a luminosidade cria versões escuras e claras relacionadas.

Um valor alfa vem depois de uma barra: rgb(0 0 0 / 0.6) é preto com 60% de opacidade. Zero é totalmente transparente e um é totalmente opaco. A notação hexadecimal de oito dígitos acrescenta um par alfa: #00000080 tem 128 de 255, cerca de 50% de alfa. transparent é totalmente transparente.

.notice {
  color: white;
  background-color: rgb(0 0 0 / 0.6);
}

Aqui, apenas o fundo é parcialmente transparente. opacity: 0.6 tornaria todo o elemento mais transparente, incluindo seu texto e seus filhos. Essa diferença importa quando você quer texto opaco e legível sobre uma superfície colorida.

Reutilize a cor e verifique o resultado

currentColor significa a própria cor de texto do elemento. Com color: #0055aa; border: 2px solid currentColor;, a borda acompanha o texto. Alterar a cor do texto também altera essa borda sem repetir um valor de cor.

O nível AA das WCAG 2.2 exige contraste de pelo menos 4,5:1 para texto normal e 3:1 para texto em tamanho grande, cerca de 24px ou cerca de 18,5px em negrito. #767676 sobre branco tem cerca de 4,54:1; #999999 sobre branco tem cerca de 2,85:1 e não atende a nenhum dos dois limiares. Use um verificador de contraste ou as ferramentas de cores do navegador no par real de primeiro plano e fundo, incluindo o efeito da transparência.

Uma medida de comprimento combina um número com uma unidade, como 16px ou 1.5rem. Não há espaço entre eles. Uma largura diferente de zero precisa de unidade: width: 300; é inválido. Zero pode omitir sua unidade. Algumas propriedades recebem intencionalmente números simples, incluindo line-height: 1.5, opacity: 0.8 e font-weight: 700.

Relacione a unidade à sua referência

Um pixel CSS não é necessariamente um ponto físico da tela. Telas de alta densidade podem usar vários pixels do dispositivo para um pixel CSS. Relações fixas entre unidades incluem 1in = 96px = 2,54cm e 1pt = 1/72in. Assim, 12pt equivale a 16px e 1cm é cerca de 37,8px. Essas conversões não garantem uma medida física em todas as telas.

Calcule valores relativos à fonte

Suponha que um elemento pai tenha uma fonte de 16px e seu filho tenha font-size: 1.25em; padding: 2em;. Calcule primeiro o tamanho da fonte: 1,25 vez 16px resulta em 20px. O preenchimento interno usa então o tamanho do próprio filho, então 2 vezes 20px resulta em 40px de cada lado.

Tamanhos de fonte em aninhados podem se multiplicar. Com li { font-size: 1.25em; }, três níveis aninhados a partir de 16px passam a ter 20px, 25px e 31,25px. Já 1.25rem resulta em 20px em todos os níveis quando a raiz tem 16px.

Deixar o tamanho da raiz no padrão do navegador, ou defini-lo em porcentagem, permite que o texto relativo responda quando um leitor altera esse padrão. Um html { font-size: 16px; } fixo anula essa configuração. Um padrão prático é usar rem para o tamanho da fonte e em para o preenchimento interno de um botão, para que seu espaçamento cresça com seu próprio texto.

Verifique porcentagens e a área de visualização

A propriedade determina a referência da porcentagem. Um bloco de referência fornece uma referência para o tamanho da caixa; nestes exemplos de fluxo normal, ela costuma ser a área de conteúdo do elemento pai. Um filho com width: 40% em um bloco de referência de 600px tem 240px de largura antes de qualquer preenchimento interno ou borda no modelo content-box. font-size: 150% usa o tamanho da fonte do elemento pai. Mesmo o preenchimento interno e as margens superior e inferior em porcentagem usam a largura do bloco de referência, não sua altura.

1vw é 1% da largura da área de visualização; 1vh é 1% de sua altura. Em uma área de visualização de 1280 por 800 pixels CSS, 50vw é 640px e 10vh é 80px. 100vw pode incluir a largura da barra de rolagem, produzindo transbordamento horizontal onde 100% do elemento pai caberia.

max-width: 65ch dá a uma coluna de texto uma largura relacionada à fonte. É aproximadamente uma medida de comprimento de leitura, não uma garantia de que cada linha tenha exatamente 65 caracteres.

Combine unidades com um cálculo

width: calc(100% - 40px); subtrai uma quantidade fixa de um tamanho relativo. Mantenha espaços ao redor de + e -; calc(100%-40px) é inválido. Navegadores calculam medidas relativas à fonte em pixels, enquanto porcentagens do tamanho do contêiner são resolvidas durante o cálculo do layout. As ferramentas do desenvolvedor mostram os tamanhos resultantes para que você possa verificar tanto a referência quanto a conta.

De dentro para fora, uma caixa tem conteúdo, preenchimento interno, borda e margem. O conteúdo contém texto, imagens ou elementos filhos. O preenchimento interno cria espaço ao redor desse conteúdo. A borda envolve o preenchimento interno; a margem separa a caixa até a borda de suas vizinhas.

Um fundo preenche o conteúdo e o preenchimento interno e se estende sob a borda, mas nunca colore a margem. Use preenchimento interno quando o espaço deve fazer parte de um cartão colorido. Use margem para o espaço fora dele. Margens podem ser negativas; preenchimento interno não pode.

Leia as propriedades abreviadas de espaçamento

margin, padding e border-width aceitam de um a quatro valores:

A ordem de quatro valores segue no sentido horário a partir do topo. Use propriedades individuais como padding-left para alterar apenas um lado depois da propriedade abreviada. Não leia o segundo valor de uma forma com dois valores como o inferior: ele define ambos os lados horizontais.

Calcule a caixa de conteúdo padrão

.card {
  width: 300px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}

O valor inicial de box-sizing é content-box. A largura declarada de 300px cobre apenas o conteúdo. Adicione duas vezes os 20px de preenchimento interno e duas vezes os 5px de borda: a caixa até a borda tem 350px de largura. Adicione as duas margens de 10px para obter 370px de espaço horizontal.

A altura funciona da mesma maneira quando é definida explicitamente, mas o texto frequentemente precisa de uma caixa que possa crescer. Manter height: auto evita prender conteúdo variável em uma altura fixa.

Inclua preenchimento interno e borda na largura

Com box-sizing: border-box, a mesma largura declarada inclui preenchimento interno e borda. A caixa até a borda continua com 300px; subtraia 40px de preenchimento interno e 10px de borda para encontrar uma área de conteúdo de 250px. As margens permanecem fora, resultando em 320px de espaço horizontal.

Uma redefinição comum aplica esse modelo aos elementos e às suas partes geradas:

*, *::before, *::after { box-sizing: border-box; }

box-sizing não é herdada automaticamente, então a regra seleciona as caixas diretamente.

Um filho de largura total facilita ver a diferença. Em um contêiner de 600px, width: 100%; padding: 0 20px; produz uma caixa até a borda de 640px no dimensionamento content-box, antes de qualquer borda. Com o dimensionamento border-box, a mesma largura declarada de 600px inclui o preenchimento interno e cabe no contêiner.

Faça o conteúdo caber com segurança

min-height define um limite inferior e permite o crescimento. max-width: 800px permite que um bloco de largura automática encolha em um contêiner estreito, impedindo que fique mais largo que 800px.

Se o conteúdo ultrapassar uma caixa fixa, overflow controla o resultado: visible transborda, hidden recorta, scroll solicita barras de rolagem e auto fornece rolagem quando necessário. pre { overflow: auto; } dá a uma linha longa de código sua própria área de rolagem. Recortar é uma solução ruim para texto de que os leitores ainda precisam; primeiro verifique se o tamanho fixo é necessário.

Use o diagrama de caixa do painel Computado para comparar os valores de conteúdo, preenchimento interno, borda e margem do navegador com seu cálculo.

O tipo de exibição determina como uma caixa se encaixa no que está ao seu redor. Um bloco normalmente começa em uma nova linha e preenche a largura disponível quando sua largura é automática. Uma caixa em linha comum flui dentro do texto e é dimensionada por seu conteúdo. Uma caixa de bloco em linha mantém a posição em linha e aceita dimensões explícitas.

Escolha o comportamento necessário

Em elementos em linha comuns como span e a, margens superior e inferior não têm efeito. O preenchimento interno e as bordas verticais são desenhados, mas não afastam as linhas vizinhas, então podem se sobrepor a elas. Preenchimento interno, bordas e margens horizontais ocupam espaço ao longo da linha.

nav a {
  display: inline-block;
  padding: 8px 16px;
}

Esses links permanecem em uma linha enquanto suas caixas com preenchimento interno reservam espaço vertical. display: block daria a cada link sua própria linha. Imagens são um caso especial em linha: aceitam largura e altura. Seu alinhamento padrão pela linha de base pode deixar um pequeno espaço abaixo para as hastes descendentes das letras; img { display: block; } remove esse espaço da linha de base.

display: none remove a caixa e seu espaço e a remove da leitura por leitores de tela. visibility: hidden a oculta enquanto preserva seu espaço.

Centralize uma caixa ou seu conteúdo

.page {
  max-width: 960px;
  margin: 0 auto;
}

Em um contêiner mais largo, o bloco para de crescer em 960px e as duas margens horizontais automáticas dividem igualmente o espaço restante. Um bloco que preenche o contêiner não tem espaço horizontal restante para dividir. Margens automáticas não centralizam uma caixa em linha comum, e margens verticais automáticas no fluxo normal de blocos resultam em zero.

text-align: center faz outra tarefa: centraliza o conteúdo em linha dentro de um bloco. Uma caixa de parágrafo centralizada ainda pode ter texto alinhado à esquerda; um parágrafo de largura total pode ter texto centralizado sem se tornar uma caixa centralizada mais estreita.

Reconheça o colapso de margens verticais

No fluxo normal de blocos, margens superiores e inferiores adjacentes podem entrar em colapso. Duas margens positivas se tornam a maior delas. Um título com margem inferior de 24px seguido de um parágrafo com margem superior de 16px tem um espaço de 24px, não 40px. Margens horizontais não entram em colapso.

Com margens positivas e negativas, combine a maior positiva com a mais negativa: 20px e −8px resultam em 12px. Se todas forem negativas, prevalece a mais negativa. Uma caixa vazia sem conteúdo, altura, borda ou preenchimento interno que separe suas margens pode combinar suas próprias margens superior e inferior.

A margem superior de um primeiro filho também pode entrar em colapso através de um elemento pai sem borda, preenchimento interno ou conteúdo anterior que as separe. O espaço então aparece fora do fundo do elemento pai. Adicione preenchimento interno ou uma borda ao elemento pai, ou remova a margem superior do filho. Condições semelhantes permitem que a margem inferior de um último filho entre em colapso; uma altura ou altura mínima no elemento pai pode impedir esse caso inferior.

Caixas de bloco em linha não têm colapso de margens, assim como itens flexíveis ou de grade e caixas flutuantes ou posicionadas de forma absoluta. Um padrão simples de espaçamento de texto define margens superiores como zero e usa margens inferiores, com preenchimento interno para o espaço dentro de contêineres.

A escolha de uma fonte é uma preferência com um plano alternativo. Dispositivos têm fontes instaladas diferentes, e uma fonte baixada pode chegar depois do texto. Uma lista de fontes alternativas mantém a página legível e preserva um estilo adequado.

Crie uma lista de fontes

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
}

O navegador tenta os nomes de família em ordem e usa uma fonte disponível. Coloque nomes que contêm espaços entre aspas. Deixe famílias genéricas sem aspas: "sans-serif" solicita uma fonte com esse nome exato; sans-serif solicita ao navegador uma fonte genérica adequada.

As opções genéricas incluem serif, sans-serif, monospace, cursive, fantasy e system-ui. A última usa a fonte da interface do sistema. Fontes frequentemente chamadas de seguras para a web, como Arial, Georgia e Verdana, são comuns, mas sua presença não é garantida. Uma alternativa genérica ainda deve ficar no final.

font-size aceita medidas de comprimento, porcentagens e palavras-chave de tamanho. Com uma raiz de 16px, 1rem resulta em 16px e 2.5rem resulta em 40px. Tamanhos relativos podem acompanhar as configurações do leitor.

Defina peso, estilo e propriedade abreviada com cuidado

font-weight: normal equivale a 400; bold equivale a 700. Valores como 300 e 600 solicitam outros pesos quando a fonte os oferece. Se um peso solicitado estiver ausente, o navegador escolhe um disponível ou pode simular o negrito. Com apenas 400 e 700 carregados, solicitar 300 usa 400. bolder e lighter são relativos ao elemento pai.

font-style: italic solicita uma versão em itálico; normal remove esse estilo. A propriedade abreviada font precisa de tamanho e família:

blockquote {
  font: italic 700 1.125rem/1.6 Georgia, serif;
}

Estilo, variante e peso opcionais vêm antes do tamanho. Uma barra associa a altura da linha ao tamanho, e a família vem por último. Omitir o tamanho ou a família invalida a propriedade abreviada. Outras configurações de fonte omitidas são redefinidas: font: 1rem Arial, sans-serif; redefine um peso anterior em negrito para normal.

Carregue um arquivo de fonte

@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
body { font-family: "Inter", Arial, sans-serif; }

@font-face atribui um nome de família CSS a um arquivo. Use esse nome declarado na lista, não o nome do arquivo. Caminhos relativos de arquivos partem da localização da folha de estilo. WOFF2 é um formato compactado aceito pelos navegadores atuais.

Fontes estáticas geralmente precisam de arquivos e regras separados para cada peso e estilo. Fontes variáveis podem conter uma faixa de pesos em um único arquivo. Carregue os arquivos que o design realmente usa. font-display: swap exibe uma fonte alternativa imediatamente e a substitui quando a fonte web fica disponível.

Um serviço de fontes pode fornecer um link HTML e a declaração da família; hospedar a fonte por conta própria evita uma requisição a um servidor de terceiros. Verifique se a licença da fonte permite o uso em sites. Se a fonte parecer errada, inspecione a fonte renderizada e a requisição do arquivo. Um nome de família CSS escrito incorretamente faz o navegador usar uma alternativa sem aviso, então texto legível por si só não mostra que a fonte desejada foi carregada.

A estilização do texto precisa continuar funcionando quando o tamanho, o conteúdo e o método de entrada mudam. Comece pelo espaçamento entre linhas e por larguras legíveis; depois adicione detalhes de listas e links que indiquem aos leitores como o conteúdo funciona.

Faça a altura da linha acompanhar cada tamanho de fonte

Use uma altura de linha sem unidade, como line-height: 1.5. Com texto de corpo de 16px, ela cria linhas de 24px. Os filhos herdam o número, então um título de 32px recebe linhas de 48px. Já um valor de 1.5em ou 150% no elemento pai é computado nele como 24px, e um filho pode herdar essa altura de linha fixa de 24px mesmo quando seu próprio texto é maior. O padrão normal depende da fonte e costuma ser cerca de 1,2.

body { font: 1.125rem/1.6 Georgia, serif; color: #222222; }
h1 { font: 700 2.25rem/1.2 Arial, sans-serif; }
p { max-width: 65ch; }

Com uma raiz de 16px, o corpo do texto tem 18px em linhas de 28,8px; o título tem 36px em linhas de 43,2px. O limite do parágrafo evita linhas muito longas em uma tela larga.

text-align posiciona conteúdo em linha dentro de um bloco. Os valores incluem left, right, center, justify, start e end; start/end seguem a direção da escrita. Ele não move o próprio bloco. A justificação em colunas estreitas pode criar espaços grandes entre palavras.

Altere a apresentação sem reescrever o texto

text-transform pode exibir palavras em maiúsculas, minúsculas ou com iniciais maiúsculas sem alterar o texto HTML. letter-spacing, word-spacing e text-indent controlam tipos diferentes de espaço. text-shadow: 1px 1px 2px rgb(0 0 0 / 0.5); fornece deslocamento horizontal, deslocamento vertical, desfoque e cor.

text-decoration adiciona sublinhados, linhas acima ou linhas através do texto. Também pode definir estilo e cor, como em underline wavy crimson. A espessura e o afastamento do sublinhado ajustam a linha. Leitores esperam que texto sublinhado seja um link, então reserve essa indicação para esse fim.

Estilize listas sem deixar recuos acidentais

list-style-type escolhe marcadores como disc, square, decimal ou lower-alpha. list-style-position: outside mantém marcadores fora do bloco de texto; inside os coloca na primeira linha, de modo que as linhas seguintes podem começar abaixo do marcador. list-style-image fornece um marcador de imagem, e li::marker pode colorir apenas o marcador.

Para uma lista de navegação simples, use .menu { list-style: none; margin: 0; padding: 0; }. Remover apenas os marcadores mantém o preenchimento interno padrão no lado inicial da lista. list-style: square inside é uma propriedade abreviada que combina configurações de marcador.

Mantenha links visíveis durante o uso

Ordene regras de estado com a mesma especificidade como link, visited, focus, hover, active. Um link pode estar visitado e com o ponteiro sobre ele; a ordem no código-fonte decide entre suas declarações de cor concorrentes. :active significa durante a ativação, não a página atual.

Mantenha links reconhecíveis por mais do que apenas a cor, geralmente com um sublinhado no corpo do texto. Dê ao foco do teclado um indicador claro:

a:focus-visible {
  outline: 3px solid #f2a900;
  outline-offset: 2px;
}

Não remova o contorno de foco a menos que outro estilo de foco visível o substitua. Um contorno não ocupa espaço no modelo de caixa, então essa indicação não desloca o texto ao redor.

Um fundo fica atrás do conteúdo de uma caixa. Sua cor preenche o conteúdo e o preenchimento interno e se estende sob a borda; a margem permanece transparente. Uma imagem é desenhada sobre a cor de fundo, então uma cor pode fornecer uma superfície confiável enquanto a imagem carrega.

Resolva o caminho a partir da folha de estilo

.hero {
  background-color: #1a2b3c;
  background-image: url("../images/hero.jpg");
}

Se o CSS estiver em css/styles.css e a imagem estiver na pasta images no nível principal do site, .. sai de css antes de entrar em images. Uma URL de imagem CSS parte do arquivo CSS, diferentemente do link da folha de estilo, que parte do arquivo HTML. Verifique a requisição da imagem se uma regra válida exibir apenas sua cor alternativa.

Fundos são decoração. Um leitor de tela não os anuncia como imagens. Coloque uma imagem informativa no HTML com texto alternativo significativo. Uma cor alternativa próxima do tom principal da imagem também ajuda o texto a permanecer legível se a imagem demorar a carregar ou estiver ausente.

Controle repetição, escala e posição

Inicialmente, imagens se repetem em seu tamanho natural. no-repeat usa uma cópia; repeat-x cria uma linha e repeat-y, uma coluna. space distribui repetições inteiras com espaços, enquanto round as ajusta para caber um número inteiro.

Para uma caixa de 800px por 400px e uma imagem quadrada de 1000px, cover dimensiona a imagem para um quadrado de 800px, deixando 400px da altura da imagem fora da caixa. Contain a dimensiona para um quadrado de 400px; com no-repeat, 400px da largura da caixa permanecem descobertos. Definir apenas contain não desativa a repetição.

A posição inicial é o canto superior esquerdo. background-position: center centraliza uma imagem; right 20px bottom 10px a desloca a partir dessas bordas. O valor horizontal vem primeiro. Center junto com cover mantém o centro visível quando o recorte é necessário.

Gere e sobreponha imagens

Um gradiente é uma imagem, então coloque-o em background-image:

background-image: linear-gradient(to right, #1e90ff, #8a2be2);

A primeira cor fica à esquerda e a segunda à direita. Ângulos e pontos de cor posicionados dão mais controle; radial-gradient(circle, white, steelblue) se espalha para fora a partir do centro. Um gradiente em background-color é inválido.

Separe várias imagens com vírgulas; a primeira fica por cima. Um gradiente preto translúcido listado antes de uma foto pode escurecer a imagem sem tornar o texto transparente.

Use a propriedade abreviada de forma intencional

background: url("hero.jpg") center / cover no-repeat #1a2b3c; combina imagem, posição, tamanho, repetição e cor. O tamanho vem depois da posição, após uma barra. Apenas a última camada pode ter uma cor. Configurações de fundo omitidas são redefinidas, então um background: white; posterior remove uma imagem anterior.

background-attachment usa inicialmente scroll, movendo-se com o elemento enquanto a página rola. fixed mantém o fundo preso à área de visualização. Teste a caixa e o texto reais depois de adicionar decoração; o dimensionamento e o recorte não devem esconder informações necessárias aos leitores.

Uma borda faz parte do modelo de caixa. Um contorno ou uma sombra é desenhado ao redor da caixa sem reservar espaço adicional. Escolher entre eles altera tanto a aparência quanto o comportamento de dimensionamento de um estilo.

Dê um estilo à borda

.note {
  border: 1px solid #cccccc;
  border-left: 4px solid crimson;
  padding-left: 12px;
}

A propriedade abreviada define largura, estilo e cor; essas partes podem aparecer em qualquer ordem. O estilo de borda é inicialmente none, então definir apenas largura e cor não produz uma borda visível. Os estilos incluem solid, dashed, dotted, double, groove, ridge, inset e outset, além de none e hidden.

Se a largura for omitida, usa-se medium, geralmente 3px nos navegadores atuais. Se a cor for omitida, usa-se currentColor, acompanhando o texto do elemento. Propriedades abreviadas de lado, como border-top, e propriedades individuais, como border-left-color, permitem adicionar uma exceção depois de uma borda geral. Por exemplo, border-top: none remove apenas a borda superior depois de uma declaração de borda nos quatro lados.

No dimensionamento content-box, uma borda de 2px em cada lado acrescenta 4px à largura e à altura. Aumentar a largura da borda quando o ponteiro passa sobre o elemento pode, portanto, deslocar o conteúdo próximo. Mantenha a largura da borda estável e altere sua cor, ou use um contorno para uma indicação que não ocupe espaço. No dimensionamento border-box, uma borda mais espessa usa mais do interior da caixa declarada.

Arredonde cantos em uma ordem previsível

border-radius: 8px arredonda todos os cantos mesmo quando a própria borda está invisível. Com quatro valores, a ordem é superior esquerdo, superior direito, inferior direito, inferior esquerdo. Dois valores se aplicam a pares de cantos opostos: o primeiro ao superior esquerdo/inferior direito, o segundo ao superior direito/inferior esquerdo.

border-radius: 50% torna uma caixa quadrada circular e uma retangular elíptica. Seu próprio fundo é recortado nessa borda arredondada. O raio em si não recorta conteúdo filho que transborda; essa é uma decisão separada de transbordamento. O raio não aumenta as dimensões medidas da caixa.

Adicione uma linha de foco ou profundidade

.link:focus-visible {
  outline: 3px solid navy;
  outline-offset: 2px;
}

Um contorno é desenhado fora da borda e não ocupa espaço no layout. Seu afastamento cria um espaço a partir da borda. É uma indicação de foco útil porque pode aparecer sem mover caixas vizinhas.

box-shadow: 0 2px 6px rgb(0 0 0 / 0.2); fornece um deslocamento horizontal de zero, um deslocamento de 2px para baixo, desfoque de 6px e uma cor preta translúcida. Um valor de expansão opcional vem depois do desfoque. inset desenha a sombra dentro; valores separados por vírgulas adicionam várias sombras. Sombras seguem cantos arredondados e não acrescentam espaço ao modelo de caixa.

Verifique um cartão finalizado

Um cartão com width: 280px; padding: 16px; border: 1px solid #dddddd; tem 314px de largura no dimensionamento content-box. Adicione duas vezes 16px e duas vezes 1px a 280px. No dimensionamento border-box, ele continua com 280px, deixando 246px para o conteúdo. Um raio de canto de 12px e uma sombra suave não alteram nenhum dos cálculos. Eles alteram a borda desenhada, não as dimensões usadas para posicionar outras caixas.