Valores, unidades e cores em CSS

As propriedades CSS dizem ao navegador o que você quer mudar. Os valores CSS dizem ao navegador qual configuração exata usar.

Por exemplo, color é uma propriedade, e blue é um valor. Juntos, eles formam uma declaração CSS completa.

Nesta aula, você vai aprender valores CSS comuns para tamanhos e cores.

O que um valor faz em CSS

Um valor completa uma declaração CSS.

Propriedades diferentes precisam de tipos diferentes de valores:

• color precisa de um valor de cor, como blue ou #2563eb.
• width precisa de um valor de tamanho, como 200px ou 50%.
• font-size precisa de um valor de tamanho de texto, como 1rem.

<p class="intro">Valores CSS controlam como este texto aparece.</p>

<style>
  .intro {
    color: blue;
    font-size: 1.25rem;
  }
</style>

O navegador lê cada propriedade junto com seu valor.

Unidades absolutas: px

px significa pixels CSS. É uma unidade absoluta, o que significa que o tamanho não depende do elemento pai.

<div class="user-card">Olá</div>

<style>
  .user-card {
    width: 300px;
    border: 1px solid black;
    padding: 16px;
  }
</style>

O card tem 300px de largura.

Use px quando precisar de uma medida pequena e exata, como uma borda, o tamanho de um ícone ou um espaçamento fixo.

Não coloque espaço entre o número e a unidade. Escreva 300px, não 300 px.

Unidades relativas: %, em e rem

Unidades relativas são calculadas a partir de outra coisa.

• % geralmente se baseia no tamanho do contêiner pai.
• em se baseia no tamanho da fonte do elemento atual.
• rem se baseia no tamanho da fonte raiz da página.

Unidades relativas são úteis porque podem se adaptar quando a página ou o tamanho do texto muda.

Quando usar px

Use px quando precisar de controle rígido sobre uma medida pequena.

Isso é útil para bordas, ícones, avatares e pequenos detalhes fixos.

Tenha cuidado com larguras grandes de layout em px. Um layout de 900px pode parecer bom em um laptop, mas transbordar em um celular pequeno.

Quando usar %

Porcentagens são fluidas. Elas mudam de acordo com o elemento pai.

Se um pai tem 800px de largura, um filho com width: 50% fica com 400px de largura.

<div class="layout">
  <div class="half-width-card">Metade da largura</div>
</div>

<style>
  .layout {
    width: 400px;
    border: 1px solid black;
  }

  .half-width-card {
    width: 50%;
    background-color: lightblue;
    padding: 12px;
  }
</style>

Use % para layouts flexíveis, colunas e elementos que devem responder ao contêiner.

Lembre-se de que a largura em porcentagem é baseada na largura do contêiner pai. Altura em porcentagem é mais difícil porque o pai também precisa ter uma altura definida.

Quando usar em

em escala com o tamanho de fonte atual.

Se um elemento tem font-size: 16px, então 1em equivale a 16px e 2em equivale a 32px.

<button class="alert-button">Excluir</button>

<style>
  .alert-button {
    font-size: 16px;
    padding: 0.75em 1.25em;
  }
</style>

Use em para espaçamento dentro de botões e componentes pequenos. Se o texto do botão ficar maior, o padding cresce junto.

Tenha cuidado ao usar em para tamanhos de fonte em elementos aninhados. Os tamanhos podem se acumular e ficar menores ou maiores do que o esperado.

Quando usar rem

rem significa root em. Ele se baseia no tamanho da fonte raiz da página, geralmente o elemento html.

Em muitos navegadores, o tamanho de fonte raiz padrão é 16px, então 2rem costuma ser 32px.

<h2 class="page-heading">Título principal</h2>

<style>
  .page-heading {
    font-size: 2rem;
  }
</style>

Use rem para tamanhos de texto consistentes em todo o site.

Se o tamanho da fonte raiz mudar, todos os valores em rem escalam a partir desse tamanho. Isso pode ajudar usuários que aumentam o tamanho do texto no navegador.

Exemplo executável: misturando unidades

Este exemplo mistura unidades fixas e relativas.

<div class="container">
  <div class="percent-card">
    <p class="rem-text">Este texto usa unidades rem.</p>
  </div>
</div>

<style>
  .container {
    width: 400px;
    background-color: lightgray;
    padding: 20px;
  }

  .percent-card {
    width: 50%;
    background-color: white;
    border: 2px solid black;
  }

  .rem-text {
    font-size: 1.5rem;
    margin: 1em;
  }
</style>

O contêiner tem largura fixa. O card usa metade dessa largura. O texto usa rem, e sua margem usa em.

Nomes de cores

CSS tem cores nomeadas como red, blue, black, white e green.

<p class="warning-text">Confira o formulário antes de enviar.</p>

<style>
  .warning-text {
    color: red;
  }
</style>

Nomes de cores são úteis para testes rápidos e exemplos simples.

Em projetos reais, você geralmente usará hex, RGB ou HSL porque eles dão mais controle.

Cores hex

Cores hex usam # seguido de seis caracteres.

Os caracteres representam vermelho, verde e azul.

<button class="primary-button">Salvar</button>

<style>
  .primary-button {
    background-color: #2563eb;
    color: #ffffff;
  }
</style>

Cores hex são comuns em ferramentas de design como o Figma.

Sempre inclua o #. Escreva #ffffff, não ffffff.

Cores RGB

RGB significa vermelho, verde e azul.

A função rgb() usa três números de 0 a 255.

<div class="header-box">Caixa azul</div>

<style>
  .header-box {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 16px;
  }
</style>

rgb(0, 0, 0) é preto. rgb(255, 255, 255) é branco.

RGB pode ser mais fácil de entender se você pensar nas cores como quantidades de luz vermelha, verde e azul.

Cores RGBA e transparência

RGBA é como RGB, mas adiciona um valor alfa.

O valor alfa controla a opacidade:

• 0 significa totalmente transparente.
• 0.5 significa 50% visível.
• 1 significa totalmente sólido.

<div class="pattern-background">
  <div class="glass-card">
    <p>Esta caixa está 80% visível.</p>
  </div>
</div>

<style>
  .pattern-background {
    background-color: navy;
    padding: 40px;
  }

  .glass-card {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
  }
</style>

Use rgba() para sobreposições, cards translúcidos e fundos colocados sobre imagens ou cores fortes.

Não use valores acima de 1 para o valor alfa.

Cores HSL

HSL significa matiz, saturação e luminosidade.

• Matiz é um número de 0 a 360 na roda de cores.
• Saturação controla a intensidade da cor.
• Luminosidade controla quão clara ou escura a cor é.

<p class="success-message">Salvo com sucesso.</p>

<style>
  .success-message {
    color: hsl(120, 100%, 35%);
  }
</style>

HSL é útil quando você quer ajustar uma cor manualmente.

Por exemplo, para deixar uma cor mais escura, você pode diminuir a porcentagem de luminosidade.

Você também pode usar hsla() para transparência:

Comparando formatos de cor

• Nomes de cores são fáceis de ler, mas limitados.
• Cores hex como #ff0000 são comuns em ferramentas de design.
• RGB como rgb(255, 0, 0) mostra diretamente os valores vermelho, verde e azul.
• RGBA como rgba(255, 0, 0, 0.5) adiciona transparência.
• HSL como hsl(0, 100%, 50%) é útil para ajustar temas de cores manualmente.

Erros comuns de iniciantes

• Escrever espaços dentro das unidades, como 20 px ou 100 %. Use 20px e 100%.
• Esquecer o # em cores hex. Use #ffffff, não ffffff.
• Esperar que height: 50% funcione sem uma altura no pai.
• Usar apenas px para layouts completos, o que pode causar transbordamento em telas pequenas.
• Usar valores alfa como 50 em rgba(). Use 0.5 para 50% visível.

Mini tarefa

Veja esta regra CSS:

Qual será a largura desta caixa se o contêiner pai tiver 800px de largura?

Qual efeito visual a cor de fundo cria?

Resposta: a caixa terá 400px de largura. O fundo será preto com 50% de opacidade, então o que estiver atrás poderá aparecer.

Quiz rápido

Pergunta 1: Qual unidade se baseia no tamanho da fonte raiz da página?

Resposta: rem.

Pergunta 2: Qual formato de cor usa o símbolo #?

Resposta: Cor hex.

Pergunta 3: O que o valor alfa faz em rgba()?

Resposta: Ele controla a opacidade, ou quão visível a cor é.

Pequeno desafio

Tente estilizar o card de perfil abaixo:

• Use px para adicionar uma borda.
• Use rem para deixar o texto do título maior.
• Use rgba() para dar ao parágrafo um fundo translúcido.
• Use uma cor hex para o fundo do botão.

<div class="profile-card">
  <h3 class="profile-name">Jane Doe</h3>
  <p class="profile-bio">Desenvolvedora web em formação.</p>
  <button class="profile-button">Seguir</button>
</div>

<style>
  .profile-card {
    /* Adicione uma borda sólida de 2px */
  }

  .profile-name {
    /* Defina o tamanho da fonte como 2rem */
  }

  .profile-bio {
    /* Adicione um fundo branco com 50% de opacidade */
  }

  .profile-button {
    /* Defina a cor de fundo com uma cor hex */
  }
</style>

Uma resposta possível:

Resumo

• Valores são as configurações aplicadas às propriedades CSS.
• px é útil para medidas exatas e fixas.
• % é relativo ao contêiner pai.
• em escala a partir do tamanho de fonte do elemento atual.
• rem escala a partir do tamanho de fonte raiz.
• Nomes de cores são simples, mas limitados.
• Hex, RGB e HSL são formas comuns de definir cores exatas.
• RGBA e HSLA adicionam transparência com um valor alfa.