---
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 ``, já estamos referenciando o `simple.css` com uma tag ``. 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
Blake's Homepage
```
{% 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.
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.
## 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 ``. 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.
## 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