---
title: 'Personalizar o Simple.css'
summary: 'Aprenda a usar variáveis CSS para dar um visual novo ao seu site com Simple.css.'
permalink: 'personalizar-o-simple-css/'
originalPath: /customizing-simple-css/
tags: chapter
layout: 'chapter.njk'
---

# Personalizar o Simple.css

O Simple.css nos dá uma base para um site limpo e bonito. Mas ele também oferece um jeito de personalizar sem um monte de trabalho extra da nossa parte. Ele usa um recurso do CSS chamado _propriedades personalizadas_ (muitas vezes chamadas de _variáveis_). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.

## Uma espiada no Simple.css

Vamos abrir o arquivo `simple.css` que adicionamos ao site antes, para ver quais variáveis podemos acessar. Não se assuste com a quantidade de código no arquivo. A gente só precisa de um pedacinho. No topo do arquivo, você vai ver um código parecido com o seguinte.

```css
/* Global variables. */
:root,
::backdrop {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, 'Avenir Next', Avenir,
    'Nimbus Sans L', Roboto, 'Noto Sans', 'Segoe UI', Arial, Helvetica,
    'Helvetica Neue', sans-serif;
  --mono-font: Consolas, Menlo, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  --standard-border-radius: 5px;

  /* Default (light) theme */
  --bg: #fff;
  --accent-bg: #f5f7ff;
  --text: #212121;
  --text-light: #585858;
  --border: #898ea4;
  --accent: #0d47a1;
  --accent-hover: #1266e2;
  --accent-text: var(--bg);
  --code: #d81b60;
  --preformatted: #444;
  --marked: #ffdd33;
  --disabled: #efefef;
}
```

Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.

No CSS, o navegador ignora o texto entre `/*` e `*/`. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de _comentários_. Neste caso, os comentários ajudam a separar o código em grupos relacionados.

O trecho que diz `:root` significa que o bloco de código a seguir — a parte entre as chaves, `{}` — vale para a página inteira. Ignore o `::backdrop` por enquanto.

Dentro das chaves, encontramos uma lista de _propriedades_. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos `columns: 2` na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, `columns` é uma _propriedade_ e `2` é um _valor_.

Qualquer propriedade que começa com `--` é uma _propriedade personalizada_, ou _variável_. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável `--accent: blue`, poderíamos usar a cor `--accent` em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos `red`, poderíamos atualizar num lugar só — escrevendo `--accent: red` — e todo elemento que usa a variável `--accent` seria atualizado sozinho.

Olhando de novo o código do Simple.css acima, vemos que temos dois grupos de variáveis. Há propriedades ligadas às fontes usadas, seguidas de uma lista de variáveis de cor que representam o que o Simple chama de “tema padrão (claro)”.

Vamos falar de fontes depois. Primeiro, as cores.

Neste caso, a maior parte das variáveis de cor aparece como códigos hexadecimais. Tudo o que você precisa saber sobre códigos hexadecimais é que eles são uma das várias formas de indicar uma cor no CSS. Abra quase qualquer mecanismo de busca e procure por “color picker”. Você vai encontrar um widget para escolher uma cor e pegar o código hexadecimal, junto com outros formatos.

Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do `simple.css`? Você _poderia_ fazer isso; funcionaria. Mas existe um jeito melhor.

## Criar uma folha de estilo personalizada

CSS significa _Cascading Style Sheets_ (folhas de estilo em cascata). Essa parte da _cascata_ é especialmente útil. De forma simples, isso significa que a ordem das regras CSS importa — regras que vêm depois sobrescrevem as que vieram antes. Para o nosso caso, isso significa que podemos criar o nosso próprio arquivo CSS. E, desde que o navegador o processe _depois_ do `simple.css`, as regras que escrevermos ali vão prevalecer. Então não estamos _mudando_ o `simple.css`. Estamos _sobrescrevendo_ ele.

Crie um arquivo na pasta `assets/css` chamado `custom.css`.

Agora vamos ligá-lo ao site. Você vai precisar fazer isso em todas as páginas, mas vamos começar pela página inicial, o arquivo `index.html` do nível mais alto. Na seção `<head>`, já estamos referenciando o `simple.css` com uma tag `<link>`. Vamos fazer o mesmo para o nosso novo arquivo `custom.css`, logo embaixo. A ordem importa aqui. Queremos que a nossa folha de estilo venha depois da do Simple, para podermos sobrescrever as variáveis dele.

```html
<head>
  <title>Blake's Homepage</title>
  <meta charset="utf-8">

  <link rel="stylesheet" href="css/simple.css">
  <link rel="stylesheet" href="css/custom.css">
</head>
```

{% aside 'Observação' %}
Isto vai funcionar na página inicial, mas, nas outras páginas, lembre-se de atualizar o caminho do arquivo de acordo (vai ser o mesmo caminho do arquivo `simple.css`).
{% endaside %}

Agora vamos adicionar algumas sobrescritas. No arquivo `custom.css`, primeiro vamos montar um bloco `:root` parecido com o do `simple.css`. Depois pegamos uma das variáveis, digamos `--bg` (a cor de _fundo_), e definimos como `red`.

```css
:root {
  --bg: red;
}
```

{% aside 'Observação' %}
Não há nada de mágico no nome da variável, `--bg`. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever.
{% endaside %}

Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma [ferramenta de escolha de cores](https://www.google.com/search?q=color+picker) na web, usar uma das muitas [cores nomeadas do CSS](https://perma.cc/JF5G-REYD) ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.

![Numa janela do Visual Studio Code, um arquivo CSS chamado "custom.css" está aberto. O editor mostra uma ferramenta de seletor de cores ao lado do código que define a cor de fundo com a propriedade `--bg: red;`. O seletor exibe vários tons de vermelho, junto com os valores RGB, para facilitar a escolha e o ajuste.](/assets/img/customizing-simple-css-1.webp)

Mas, antes de escolher cores, vamos falar do modo escuro.

## Modo escuro

O Simple já tem suporte automático aos modos claro e escuro, com base na configuração do sistema de quem visita. Você pode ter notado isso se ligou o modo escuro nas configurações do sistema. Se olharmos o arquivo `simple.css`, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.

```css
/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: #212121;
    --accent-bg: #2b2b2b;
    --text: #dcdcdc;
    --text-light: #ababab;
    --accent: #ffb300;
    --accent-hover: #ffe099;
    --accent-text: var(--bg);
    --code: #f06292;
    --preformatted: #ccc;
    --disabled: #111;
  }
  /* Add a bit of transparency so light media isn't so glaring in dark mode */
  img,
  video {
    opacity: 0.8;
  }
}
```

Este bloco usa um recurso do CSS chamado _media queries_. Neste caso, a regra `@media` diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.

A primeira regra define o esquema de cores padrão como escuro e depois _redefine_ as variáveis de cor que valem para o documento raiz (ou seja, a página inteira). A segunda regra deixa imagens e vídeo um pouco transparentes, para não ficarem “tão ofuscantes no modo escuro”.

Não sabemos se quem visita o nosso site prefere o modo claro ou o escuro. Por isso, devemos definir cores adequadas para os dois modos. Se quiser, você pode copiar esses dois blocos de código (o bloco “Global variables” e o bloco “Dark theme”) do `simple.css` para o seu `custom.css` e então mudar os valores de cor como preferir. Ou pode especificar só as que quiser mudar. De qualquer forma, garanta que as cores certas estejam na seção certa.

## Um exemplo de personalização

Para o tema claro padrão, eu decidi ficar só com cores nomeadas do CSS, como um exercício divertido. Você pode pensar nas cores nomeadas como uma caixa de giz de cera — tem muitas, mas elas não representam todas as cores possíveis. Ainda assim, são um jeito fácil de se referir a cores de forma humana.

Por outro lado, as cores do modo escuro pediram um toque mais fino. Eu usei o seletor de cores embutido do Visual Studio Code para escolher algumas cores específicas. Elas aparecem no formato `rgb` aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.

Este é o código que eu coloquei no meu `custom.css`.

```css
:root {
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root,
  ::backdrop {
    color-scheme: dark;
    --bg: rgb(17, 18, 18);
    --border: rgb(80, 90, 90);
    --accent-bg: rgb(35, 35, 36);
    --text: ghostwhite;
    --accent: lightskyblue;
    --accent-hover: lightblue;
    --marked: gold;
  }
}
```

Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.

![Uma imagem em tela dividida mostra duas versões de uma página de blog: à esquerda, a página usa um tema claro personalizado, com rosas vibrantes e verdes pálidos. À direita, usa um tema escuro personalizado, com azul como cor de destaque para links e botões. As duas versões apresentam o mesmo conteúdo da listagem do blog. O uso de cores personalizadas aqui marca uma saída dos temas claro e escuro padrão usados antes.](/assets/img/customizing-simple-css-2.webp)

## Escolher cores acessíveis

Algumas combinações de cor podem deixar o texto difícil de ler por causa do pouco contraste. Você quer garantir bastante contraste entre a cor do texto e a cor do fundo.

Você pode confiar nos olhos até certo ponto, mas cada pessoa é diferente. Felizmente, existem padrões sobre quanto contraste o texto deve ter. Você pode usar um [verificador de contraste como este](https://perma.cc/KGB2-G7Y4). Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.

## Mudar a fonte

Eu passei rápido por isso antes, mas você pode ter notado algumas variáveis ligadas a fontes acima das variáveis de cor definidas no `simple.css`. Uma delas, `--sans-font`, é responsável pela maior parte do texto da página (a outra, `--mono-font`, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).

Se você não conhece, fontes _sans-serif_ são aquelas que não têm _serifa_, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável `--sans-font` para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.

Primeiro, vamos falar de fontes na web.

## Fontes na web

Quem visita o seu site só consegue ver fontes instaladas no sistema dessa pessoa. Isso significa que, se você, quem escreve a página, especificar no CSS alguma fonte aleatória baixada de um site, _você_ vai ver essa fonte na página. Mas quem visita vai ver uma _alternativa_ (_fallback_), a menos que essa pessoa também tenha a fonte instalada.

É por isso que, em geral, várias fontes são especificadas no CSS. Se a primeira fonte não estiver disponível no computador ou no aparelho de quem visita, o navegador tenta a próxima, e assim por diante.

```css
body {
  /* the first font needs quotes because the name includes spaces */
  font-family: "Some Rando Font", Georgia, serif;
}
```

A regra de estilo acima define a fonte do `<body>`. O navegador primeiro tenta usar “Some Rando Font”. Se ela não estiver disponível no aparelho de quem visita, ele tenta usar Georgia. Se _essa_ também não estiver, dissemos ao navegador para usar a fonte `serif` padrão que ele tiver.

Aqui vai uma boa referência para encontrar [fontes comuns nos aparelhos das pessoas](https://practicaltypography.com/system-fonts.html) e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.

Às vezes, você tem uma fonte que _realmente_ quer que as pessoas vejam, mesmo sabendo que elas não vão tê-la instalada. Felizmente, existe um jeito de lidar com isso. Chamam-se _fontes da web_ (_web fonts_). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, [Básico de CSS](/basico-de-css). Em resumo, é um método de fornecer a fonte automaticamente a quem visita.

## Sobrescrever a variável da fonte

Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de `--sans-font`, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.

Podemos sobrescrever a variável `--sans-font` do Simple dentro do bloco `:root`, para que valha para a página inteira.

```css
:root {
  --sans-font: Georgia, "Times New Roman", serif;
  --bg: mintcream;
  --border: darkslategray;
  --accent-bg: honeydew;
  --text: darkslategray;
  --accent: mediumvioletred;
  --accent-hover: mediumvioletred;
  --marked: mediumspringgreen;
}
```

Nós especificamos a fonte Georgia, mas também oferecemos duas alternativas. Colocamos Times New Roman como segunda opção. Observe que esta precisa ir entre aspas porque o nome tem espaços.

Usamos uma palavra-chave do CSS, `serif`, para a terceira opção. Isso diz ao navegador para usar a fonte serifada padrão dele, seja qual for. Muitas vezes, vai ser Times New Roman. Outras palavras-chave que você tem aqui são `sans-serif`, `monospace` e `cursive`, [entre outras](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax)

Aqui vai um dos posts do blog composto em Georgia.

![Captura de tela de um post de blog intitulado "Why donuts are the best thing ever", datado de 20 de abril de 2024. Ele usa o tema claro personalizado de antes. O texto está numa fonte serifada, e não na sans-serif padrão.](/assets/img/customizing-simple-css-3.webp)

## Deixe com a sua cara

Eu escolhi o Simple.css para este livro porque ele deixa o HTML bonito sem trabalho extra. Mas também escolhi porque ele pode ser personalizado com algumas variáveis CSS. Mesmo sendo só cores e fontes, as possibilidades de deixar o seu site único são infinitas.

Eu te animo a explorar o mundo da cor e experimentar combinações diferentes. No próximo capítulo bônus, eu cubro ainda mais CSS, para você ir além do Simple e escrever os seus próprios estilos.

## A seguir