code.pablomurad.com — htmlepessoas.com.git (gh-pages): personalizar-o-simple-css/index.html

personalizar-o-simple-css/index.html (view raw)
<!doctype html>

<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, width=device-width" />

    <title>Personalizar o Simple.css</title>

    <meta property="og:title" content="Personalizar o Simple.css" />
    <meta property="og:description" content="Aprenda a usar variáveis CSS para dar um visual novo ao seu site com Simple.css." />
    <meta property="og:image" content="/assets/img/design/og.png" />
    <meta property="og:locale" content="pt_BR" />
    <link rel="canonical" href="https://htmlepessoas.com/personalizar-o-simple-css/" />
    <link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/personalizar-o-simple-css/" />
    
    <link
      rel="alternate"
      hreflang="en"
      href="https://htmlforpeople.com/customizing-simple-css/"
    />
    <link
      rel="alternate"
      hreflang="x-default"
      href="https://htmlforpeople.com/customizing-simple-css/"
    />
    

    <!-- favicon -->
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="/assets/img/design/favicon.png"
    />

    <script>
      /**
       * A global function that the theme toggle can use to apply the current theme.
       * @param {string | undefined} override - The setting that needs to be applied or undefined
       * @returns {string} - The applied theme setting
       */
      window.applyThemeSetting = function (override) {
        const getSystemPreference = () => {
          if (
            window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches
          ) {
            return 'dark';
          }
          return 'light';
        };
        const currentSetting =
          override ||
          localStorage.getItem('user-color-scheme') ||
          getSystemPreference();
        const currentThemeValue =
          document.documentElement.getAttribute('data-theme');
        if (currentSetting && currentSetting !== currentThemeValue) {
          document.documentElement.setAttribute('data-theme', currentSetting);
          localStorage.setItem('user-color-scheme', currentSetting);
        }
        return currentSetting;
      };
      window.applyThemeSetting();
    </script>

    <link rel="stylesheet" href="/assets/css/style.css" />

    <script defer src="/assets/js/app.js"></script>
    
  </head>

  <body class="chapter">
    
      <header class="site-header">
        <div class="logo-wrap">
          <p class="site-title container">
            <a href="/">
              <span class="sr-only">HTML e pessoas</span>
              <?xml version="1.0" encoding="UTF-8"?>
<svg width="2322px" height="495px" viewBox="0 0 2322 495" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>HTML e pessoas</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="logo" transform="translate(10, 10)">
            <rect id="logo-border" stroke="#465362" stroke-width="17" fill="#FFFFFF" fill-rule="nonzero" stroke-linecap="round" stroke-linejoin="round" x="736.625" y="176.75" width="1566.86261" height="283" rx="123.44"></rect>
            <text id="logo-text" x="1520" y="330" text-anchor="middle" dominant-baseline="middle" font-family="Fraunces, Georgia, serif" font-size="120" font-weight="600" fill="#465362">HTML e pessoas</text>
            <g id="mascot-hover" opacity="0" transform="translate(6, 0)" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="146.285827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M56.4958271,474.41 L123.035827,467.1 C149.885827,464.15 168.065827,441.55 159.785827,417.04 L132.775827,337.04 C124.505827,312.53 96.3458271,305.58 73.2058271,319.51 L15.8458271,354.03 C2.28582712,362.19 -3.35417288,381.06 2.00582712,396.92 L19.4858271,448.7 C24.8458271,464.56 40.7558271,476.15 56.4958271,474.42 L56.4958271,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="75.7858271" y1="363.13" x2="98.6458271" y2="430.83" id="Path"></line>
                <line x1="33.9858271" y1="382.27" x2="53.7958271" y2="440.95" id="Path"></line>
                <line x1="493.405827" y1="377.04" x2="319.845827" y2="318.43" id="Path"></line>
                <path d="M583.195827,474.41 L516.655827,467.1 C489.805827,464.15 471.625827,441.55 479.905827,417.04 L506.915827,337.04 C515.185827,312.53 543.345827,305.58 566.485827,319.51 L623.845827,354.03 C637.405827,362.19 643.045827,381.06 637.685827,396.92 L620.205827,448.7 C614.845827,464.56 598.935827,476.15 583.195827,474.42 L583.195827,474.41 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="563.905827" y1="363.13" x2="541.045827" y2="430.83" id="Path"></line>
                <line x1="605.715827" y1="382.27" x2="585.905827" y2="440.95" id="Path"></line>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="319.845827" cy="318.43" r="145.32"></circle>
                <line x1="245.355827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <line x1="394.335827" y1="102.33" x2="319.845827" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="319.845827" cy="25.58" r="25.58"></circle>
                <path d="M429.795827,99.35 C429.795827,120.51 380.575827,173.11 319.845827,173.11 C259.115827,173.11 209.895827,120.51 209.895827,99.35 C209.895827,82.85 429.785827,82.85 429.785827,99.35 L429.795827,99.35 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <path d="M217.775827,282.53 C222.375827,277.93 228.725827,275.09 235.735827,275.09 C242.745827,275.09 249.095827,277.93 253.695827,282.53" id="Path"></path>
                <path d="M385.995827,282.53 C390.595827,277.93 396.945827,275.09 403.955827,275.09 C410.965827,275.09 417.315827,277.93 421.915827,282.53" id="Path"></path>
                <path d="M357.355827,300.956336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,300.956336 L357.355827,300.956336 Z" id="Path" fill="#465362" fill-rule="nonzero"></path>
                <path d="M357.355827,366.436336 L357.355827,397.496336 C357.355827,416.576336 341.895827,432.046336 322.815827,432.046336 C303.735827,432.046336 288.265827,416.576336 288.265827,397.496336 L288.265827,366.826336 C299.195827,362.796336 311.025827,360.596336 323.355827,360.596336 C335.685827,360.596336 346.725827,362.656336 357.355827,366.436336 L357.355827,366.436336 Z" id="Path" fill="#FF8080" fill-rule="nonzero"></path>
            </g>
            <g id="mascot" stroke="#465362" stroke-linecap="round" stroke-linejoin="round" stroke-width="20">
                <line x1="326.24" y1="318.43" x2="509.43" y2="318.43" id="Path"></line>
                <path d="M625.65,381.96 L560.26,396.32 C533.88,402.11 509.43,386.52 509.43,360.65 L509.43,276.21 C509.43,250.35 533.88,234.75 560.26,240.54 L625.65,254.9 C641.11,258.3 652.49,274.36 652.49,291.1 L652.49,345.75 C652.49,362.49 641.12,378.56 625.65,381.95 L625.65,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="571.77" y1="282.71" x2="571.77" y2="354.16" id="Path"></line>
                <line x1="617.51" y1="287.47" x2="617.51" y2="349.4" id="Path"></line>
                <line x1="143.06" y1="318.43" x2="326.24" y2="318.43" id="Path"></line>
                <path d="M26.84,381.96 L92.23,396.32 C118.61,402.11 143.06,386.52 143.06,360.65 L143.06,276.21 C143.06,250.35 118.61,234.75 92.23,240.54 L26.84,254.9 C11.38,258.3 0,274.36 0,291.1 L0,345.75 C0,362.49 11.37,378.56 26.84,381.95 L26.84,381.96 Z" id="Path" fill="#64B5F6" fill-rule="nonzero"></path>
                <line x1="80.71" y1="282.71" x2="80.71" y2="354.16" id="Path"></line>
                <line x1="34.98" y1="287.47" x2="34.98" y2="349.4" id="Path"></line>
                <line x1="251.75" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <line x1="400.73" y1="102.33" x2="326.24" y2="51.17" id="Path"></line>
                <circle id="Oval" fill="#FFB74D" fill-rule="nonzero" cx="326.24" cy="25.58" r="25.58"></circle>
                <path d="M436.19,99.36 C436.19,120.52 386.96,173.12 326.24,173.12 C320.76,173.12 315.37,172.69 310.1,171.89 C257.03,163.88 216.29,118.61 216.29,99.36 C216.29,88.85 305.59,85.03 370.38,87.92 C407.26,89.56 436.19,93.37 436.19,99.36 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
                <circle id="Oval" fill="#BBDEFB" fill-rule="nonzero" cx="326.24" cy="318.43" r="145.32"></circle>
                <path d="M360.24,302.58 C351.4,311.42 339.18,316.89 325.69,316.89 C312.2,316.89 299.98,311.42 291.14,302.58" id="Path"></path>
                <path d="M223.62,282.53 C228.22,277.93 234.57,275.09 241.58,275.09 C248.59,275.09 254.94,277.93 259.54,282.53" id="Path"></path>
                <path d="M391.84,282.53 C396.44,277.93 402.79,275.09 409.8,275.09 C416.81,275.09 423.16,277.93 427.76,282.53" id="Path"></path>
            </g>
        </g>
    </g>
</svg>
            </a>
          </p>
        </div>

        <a href="#main-content" class="skip-link">Pular para o conteúdo</a>

        <div class="container"><details class="main-menu" id="main-menu">
  <summary>Menu</summary>

  <nav>
    <p class="menu-heading">
      <strong>Capítulos</strong>
    </p>

    <ul>
      <li>
        <a href="/introducao" 
          >Introdução</a
        >
      </li>
      <li>
        <a
          href="/do-zero-a-internet-seu-primeiro-site"
          
          >Do zero à internet: seu primeiro site</a
        >
      </li>
      <li>
        <a
          href="/adicionar-conteudo-ao-seu-site"
          
          >Adicionar conteúdo ao seu site</a
        >
      </li>
      <li>
        <a
          href="/intervalo-melhore-seu-editor-de-texto"
          
          >Intervalo: melhore seu editor de texto</a
        >
      </li>
      <li>
        <a
          href="/um-site-com-estilo"
          
          >Um site com estilo</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-sobre"
          
          >Adicionar uma página Sobre</a
        >
      </li>
      <li>
        <a href="/adicionar-um-blog" 
          >Adicionar um blog</a
        >
      </li>
      <li>
        <a
          href="/adicionar-um-curriculo"
          
          >Adicionar um currículo</a
        >
      </li>
      <li>
        <a
          href="/intervalo-instalar-um-servidor-local"
          
          >Intervalo: instalar um servidor local</a
        >
      </li>
      <li>
        <a
          href="/adicionar-uma-pagina-divertida"
          
          >Adicionar uma página divertida</a
        >
      </li>
      <li>
        <a
          href="/conquista-desbloqueada-hipertextista"
          
          >Conquista desbloqueada: Hipertextista</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Capítulos bônus</strong>
    </p>
    <ul>
      <li>
        <a
          href="/personalizar-o-simple-css"
          aria-current="page"
          >Personalizar o Simple.css</a
        >
      </li>
      <li>
        <a href="/basico-de-css" 
          >Básico de CSS</a
        >
      </li>
      <li>
        <a
          href="/html-reutilizavel-com-php"
          
          >HTML reutilizável com PHP</a
        >
      </li>
    </ul>

    <p class="menu-heading">
      <strong>Demos e recursos</strong>
    </p>

    <ul>
      <li>
        <a target="_blank" rel="noopener" href="https://demo.htmlforpeople.com/"
          >Demo da homepage do Blake</a
        >
      </li>
      <li>
        <a
          target="_blank"
          rel="noopener"
          href="https://planets.htmlforpeople.com/"
          >Demo Planetas do Sistema Solar</a
        >
      </li>
      <li>
        <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
          >Recursos e links</a
        >
      </li>
    </ul>
  </nav>

  <div class="settings" hidden>
    <p class="menu-heading">
      <strong>Ajustes</strong>
    </p>

    <theme-toggle>
      <label class="checkbox theme-toggle">
        <input type="checkbox" /> Tema escuro
      </label>
    </theme-toggle>

    <code-wrap>
      <label class="checkbox code-wrap">
        <input type="checkbox" /> Quebrar linhas do código
      </label>
    </code-wrap>
  </div>
</details>
</div>
      </header>
    

    <main id="main-content" class="container">
      
  <h1 id="personalizar-o-simplecss" tabindex="-1"><a class="header-anchor" href="#personalizar-o-simplecss">Personalizar o Simple.css</a></h1>
<p>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 <em>propriedades personalizadas</em> (muitas vezes chamadas de <em>variáveis</em>). Essas variáveis permitem mudar cores e fontes num lugar só, com pouquíssimo código.</p>
<h2 id="uma-espiada-no-simplecss" tabindex="-1"><a class="header-anchor" href="#uma-espiada-no-simplecss">Uma espiada no Simple.css</a></h2>
<p>Vamos abrir o arquivo <code>simple.css</code> 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.</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* Global variables. */</span>
<span class="token selector">:root,
::backdrop</span> <span class="token punctuation">{</span>
  <span class="token comment">/* Set sans-serif &amp; mono fonts */</span>
  <span class="token property">--sans-font</span><span class="token punctuation">:</span> -apple-system<span class="token punctuation">,</span> BlinkMacSystemFont<span class="token punctuation">,</span> <span class="token string">'Avenir Next'</span><span class="token punctuation">,</span> Avenir<span class="token punctuation">,</span>
    <span class="token string">'Nimbus Sans L'</span><span class="token punctuation">,</span> Roboto<span class="token punctuation">,</span> <span class="token string">'Noto Sans'</span><span class="token punctuation">,</span> <span class="token string">'Segoe UI'</span><span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span>
    <span class="token string">'Helvetica Neue'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
  <span class="token property">--mono-font</span><span class="token punctuation">:</span> Consolas<span class="token punctuation">,</span> Menlo<span class="token punctuation">,</span> Monaco<span class="token punctuation">,</span> <span class="token string">'Andale Mono'</span><span class="token punctuation">,</span> <span class="token string">'Ubuntu Mono'</span><span class="token punctuation">,</span> monospace<span class="token punctuation">;</span>
  <span class="token property">--standard-border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>

  <span class="token comment">/* Default (light) theme */</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #f5f7ff<span class="token punctuation">;</span>
  <span class="token property">--text</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span>
  <span class="token property">--text-light</span><span class="token punctuation">:</span> #585858<span class="token punctuation">;</span>
  <span class="token property">--border</span><span class="token punctuation">:</span> #898ea4<span class="token punctuation">;</span>
  <span class="token property">--accent</span><span class="token punctuation">:</span> #0d47a1<span class="token punctuation">;</span>
  <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #1266e2<span class="token punctuation">;</span>
  <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">--code</span><span class="token punctuation">:</span> #d81b60<span class="token punctuation">;</span>
  <span class="token property">--preformatted</span><span class="token punctuation">:</span> #444<span class="token punctuation">;</span>
  <span class="token property">--marked</span><span class="token punctuation">:</span> #ffdd33<span class="token punctuation">;</span>
  <span class="token property">--disabled</span><span class="token punctuation">:</span> #efefef<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Aqui já estamos entrando um pouco na sintaxe do CSS, mas talvez não seja tão assustador quanto parece. Vamos por partes.</p>
<p>No CSS, o navegador ignora o texto entre <code>/*</code> e <code>*/</code>. É um jeito de escrever notas para você — ou para outras pessoas que lerem o código-fonte — chamadas de <em>comentários</em>. Neste caso, os comentários ajudam a separar o código em grupos relacionados.</p>
<p>O trecho que diz <code>:root</code> significa que o bloco de código a seguir — a parte entre as chaves, <code>{}</code> — vale para a página inteira. Ignore o <code>::backdrop</code> por enquanto.</p>
<p>Dentro das chaves, encontramos uma lista de <em>propriedades</em>. Já vimos propriedades CSS num capítulo anterior. Por exemplo, usamos <code>columns: 2</code> na página do currículo para organizar uma lista com marcadores em duas colunas. Nesse caso, <code>columns</code> é uma <em>propriedade</em> e <code>2</code> é um <em>valor</em>.</p>
<p>Qualquer propriedade que começa com <code>--</code> é uma <em>propriedade personalizada</em>, ou <em>variável</em>. É um jeito de reutilizar um valor em vários lugares. Por exemplo, se tivéssemos uma variável <code>--accent: blue</code>, poderíamos usar a cor <code>--accent</code> em vários elementos ao mesmo tempo. E se um dia decidíssemos mudar o destaque para outra cor, digamos <code>red</code>, poderíamos atualizar num lugar só — escrevendo <code>--accent: red</code> — e todo elemento que usa a variável <code>--accent</code> seria atualizado sozinho.</p>
<p>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)”.</p>
<p>Vamos falar de fontes depois. Primeiro, as cores.</p>
<p>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.</p>
<p>Beleza, então como definimos as nossas próprias cores? A gente muda aqui dentro do <code>simple.css</code>? Você <em>poderia</em> fazer isso; funcionaria. Mas existe um jeito melhor.</p>
<h2 id="criar-uma-folha-de-estilo-personalizada" tabindex="-1"><a class="header-anchor" href="#criar-uma-folha-de-estilo-personalizada">Criar uma folha de estilo personalizada</a></h2>
<p>CSS significa <em>Cascading Style Sheets</em> (folhas de estilo em cascata). Essa parte da <em>cascata</em> é 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 <em>depois</em> do <code>simple.css</code>, as regras que escrevermos ali vão prevalecer. Então não estamos <em>mudando</em> o <code>simple.css</code>. Estamos <em>sobrescrevendo</em> ele.</p>
<p>Crie um arquivo na pasta <code>assets/css</code> chamado <code>custom.css</code>.</p>
<p>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 <code>index.html</code> do nível mais alto. Na seção <code>&lt;head&gt;</code>, já estamos referenciando o <code>simple.css</code> com uma tag <code>&lt;link&gt;</code>. Vamos fazer o mesmo para o nosso novo arquivo <code>custom.css</code>, 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.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Blake's Homepage<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>

  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/simple.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/custom.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>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 <code>simple.css</code>).</p>
</aside>
<p>Agora vamos adicionar algumas sobrescritas. No arquivo <code>custom.css</code>, primeiro vamos montar um bloco <code>:root</code> parecido com o do <code>simple.css</code>. Depois pegamos uma das variáveis, digamos <code>--bg</code> (a cor de <em>fundo</em>), e definimos como <code>red</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<aside class="aside"><p class="aside-label">Observação</p><p>Não há nada de mágico no nome da variável, <code>--bg</code>. Quem criou o Simple.css decidiu chamar assim, então é isso que vamos precisar usar para sobrescrever.</p>
</aside>
<p>Se você recarregar a página, deve ver um fundo vermelho, admitidamente horroroso. Vamos escolher uma cor melhor. Você pode buscar uma <a href="https://www.google.com/search?q=color+picker">ferramenta de escolha de cores</a> na web, usar uma das muitas <a href="https://perma.cc/JF5G-REYD">cores nomeadas do CSS</a> ou, se estiver usando o Visual Studio Code, usar o seletor de cores embutido passando o mouse sobre um valor de cor.</p>
<p><img src="/assets/img/customizing-simple-css-1.webp" alt="Numa janela do Visual Studio Code, um arquivo CSS chamado &quot;custom.css&quot; 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 . O seletor exibe vários tons de vermelho, junto com os valores RGB, para facilitar a escolha e o ajuste."></p>
<p>Mas, antes de escolher cores, vamos falar do modo escuro.</p>
<h2 id="modo-escuro" tabindex="-1"><a class="header-anchor" href="#modo-escuro">Modo escuro</a></h2>
<p>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 <code>simple.css</code>, vemos a versão de modo escuro de todas as variáveis logo abaixo das outras que vimos antes.</p>
<pre class="language-css"><code class="language-css"><span class="token comment">/* Dark theme */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">:root,
  ::backdrop</span> <span class="token punctuation">{</span>
    <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span>
    <span class="token property">--bg</span><span class="token punctuation">:</span> #212121<span class="token punctuation">;</span>
    <span class="token property">--accent-bg</span><span class="token punctuation">:</span> #2b2b2b<span class="token punctuation">;</span>
    <span class="token property">--text</span><span class="token punctuation">:</span> #dcdcdc<span class="token punctuation">;</span>
    <span class="token property">--text-light</span><span class="token punctuation">:</span> #ababab<span class="token punctuation">;</span>
    <span class="token property">--accent</span><span class="token punctuation">:</span> #ffb300<span class="token punctuation">;</span>
    <span class="token property">--accent-hover</span><span class="token punctuation">:</span> #ffe099<span class="token punctuation">;</span>
    <span class="token property">--accent-text</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--bg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">--code</span><span class="token punctuation">:</span> #f06292<span class="token punctuation">;</span>
    <span class="token property">--preformatted</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
    <span class="token property">--disabled</span><span class="token punctuation">:</span> #111<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token comment">/* Add a bit of transparency so light media isn't so glaring in dark mode */</span>
  <span class="token selector">img,
  video</span> <span class="token punctuation">{</span>
    <span class="token property">opacity</span><span class="token punctuation">:</span> 0.8<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Este bloco usa um recurso do CSS chamado <em>media queries</em>. Neste caso, a regra <code>@media</code> diz que os estilos de dentro do bloco devem valer se a pessoa tiver indicado preferência pelo modo escuro.</p>
<p>A primeira regra define o esquema de cores padrão como escuro e depois <em>redefine</em> 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”.</p>
<p>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 <code>simple.css</code> para o seu <code>custom.css</code> 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.</p>
<h2 id="um-exemplo-de-personalizacao" tabindex="-1"><a class="header-anchor" href="#um-exemplo-de-personalizacao">Um exemplo de personalização</a></h2>
<p>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.</p>
<p>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 <code>rgb</code> aqui porque foi o que o editor fez por padrão quando eu selecionei as cores.</p>
<p>Este é o código que eu coloquei no meu <code>custom.css</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span>
  <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
  <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span>
  <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
  <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
  <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
  <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">/* Dark theme */</span>
<span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">prefers-color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">)</span></span> <span class="token punctuation">{</span>
  <span class="token selector">:root,
  ::backdrop</span> <span class="token punctuation">{</span>
    <span class="token property">color-scheme</span><span class="token punctuation">:</span> dark<span class="token punctuation">;</span>
    <span class="token property">--bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>17<span class="token punctuation">,</span> 18<span class="token punctuation">,</span> 18<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">--border</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>80<span class="token punctuation">,</span> 90<span class="token punctuation">,</span> 90<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">--accent-bg</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>35<span class="token punctuation">,</span> 35<span class="token punctuation">,</span> 36<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">--text</span><span class="token punctuation">:</span> ghostwhite<span class="token punctuation">;</span>
    <span class="token property">--accent</span><span class="token punctuation">:</span> lightskyblue<span class="token punctuation">;</span>
    <span class="token property">--accent-hover</span><span class="token punctuation">:</span> lightblue<span class="token punctuation">;</span>
    <span class="token property">--marked</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span></code></pre>
<p>Aqui vai uma prévia lado a lado da aparência da página de índice do blog nos modos claro e escuro.</p>
<p><img src="/assets/img/customizing-simple-css-2.webp" alt="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."></p>
<h2 id="escolher-cores-acessiveis" tabindex="-1"><a class="header-anchor" href="#escolher-cores-acessiveis">Escolher cores acessíveis</a></h2>
<p>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.</p>
<p>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 <a href="https://perma.cc/KGB2-G7Y4">verificador de contraste como este</a>. Dê duas cores a ele, e ele diz se o contraste entre elas é suficiente.</p>
<h2 id="mudar-a-fonte" tabindex="-1"><a class="header-anchor" href="#mudar-a-fonte">Mudar a fonte</a></h2>
<p>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 <code>simple.css</code>. Uma delas, <code>--sans-font</code>, é responsável pela maior parte do texto da página (a outra, <code>--mono-font</code>, é usada para coisas como mostrar código, como eu estou fazendo neste parágrafo).</p>
<p>Se você não conhece, fontes <em>sans-serif</em> são aquelas que não têm <em>serifa</em>, aqueles pezinhos que você encontra em outras fontes, como Times New Roman. O Simple usa a variável <code>--sans-font</code> para a maior parte do texto da página por padrão, mas podemos sobrescrever com o que quisermos.</p>
<p>Primeiro, vamos falar de fontes na web.</p>
<h2 id="fontes-na-web" tabindex="-1"><a class="header-anchor" href="#fontes-na-web">Fontes na web</a></h2>
<p>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, <em>você</em> vai ver essa fonte na página. Mas quem visita vai ver uma <em>alternativa</em> (<em>fallback</em>), a menos que essa pessoa também tenha a fonte instalada.</p>
<p>É 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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token comment">/* the first font needs quotes because the name includes spaces */</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">"Some Rando Font"</span><span class="token punctuation">,</span> Georgia<span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>A regra de estilo acima define a fonte do <code>&lt;body&gt;</code>. 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 <em>essa</em> também não estiver, dissemos ao navegador para usar a fonte <code>serif</code> padrão que ele tiver.</p>
<p>Aqui vai uma boa referência para encontrar <a href="https://practicaltypography.com/system-fonts.html">fontes comuns nos aparelhos das pessoas</a> e ver as suas opções. Você sempre vai querer oferecer algumas alternativas decentes também.</p>
<p>Às vezes, você tem uma fonte que <em>realmente</em> 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 <em>fontes da web</em> (<em>web fonts</em>). Elas são complexas demais para cobrir aqui, mas eu falo delas de forma breve no próximo capítulo, <a href="/basico-de-css">Básico de CSS</a>. Em resumo, é um método de fornecer a fonte automaticamente a quem visita.</p>
<h2 id="sobrescrever-a-variavel-da-fonte" tabindex="-1"><a class="header-anchor" href="#sobrescrever-a-variavel-da-fonte">Sobrescrever a variável da fonte</a></h2>
<p>Vamos usar uma fonte serifada. Mesmo o Simple chamando a variável de <code>--sans-font</code>, não há nada de mágico no nome. Podemos definir o que quisermos. Vamos usar Georgia, que é sempre um prazer de ler.</p>
<p>Podemos sobrescrever a variável <code>--sans-font</code> do Simple dentro do bloco <code>:root</code>, para que valha para a página inteira.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
  <span class="token property">--sans-font</span><span class="token punctuation">:</span> Georgia<span class="token punctuation">,</span> <span class="token string">"Times New Roman"</span><span class="token punctuation">,</span> serif<span class="token punctuation">;</span>
  <span class="token property">--bg</span><span class="token punctuation">:</span> mintcream<span class="token punctuation">;</span>
  <span class="token property">--border</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
  <span class="token property">--accent-bg</span><span class="token punctuation">:</span> honeydew<span class="token punctuation">;</span>
  <span class="token property">--text</span><span class="token punctuation">:</span> darkslategray<span class="token punctuation">;</span>
  <span class="token property">--accent</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
  <span class="token property">--accent-hover</span><span class="token punctuation">:</span> mediumvioletred<span class="token punctuation">;</span>
  <span class="token property">--marked</span><span class="token punctuation">:</span> mediumspringgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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.</p>
<p>Usamos uma palavra-chave do CSS, <code>serif</code>, 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 <code>sans-serif</code>, <code>monospace</code> e <code>cursive</code>, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#syntax">entre outras</a></p>
<p>Aqui vai um dos posts do blog composto em Georgia.</p>
<p><img src="/assets/img/customizing-simple-css-3.webp" alt="Captura de tela de um post de blog intitulado &quot;Why donuts are the best thing ever&quot;, 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."></p>
<h2 id="deixe-com-a-sua-cara" tabindex="-1"><a class="header-anchor" href="#deixe-com-a-sua-cara">Deixe com a sua cara</a></h2>
<p>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.</p>
<p>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.</p>
<h2 id="a-seguir" tabindex="-1"><a class="header-anchor" href="#a-seguir">A seguir</a></h2>

  
  

  
    <nav
      class="mb-xl"
      style="display: flex; flex-direction: column; gap: 0.5rem;"
    >
      
        <p>
          <strong><span role="presentation">&rarr;</span> Próximo capítulo:</strong>
          <a href="/basico-de-css/">Básico de CSS</a>
        </p>
      

      
        <p>
          <strong
            ><span role="presentation">&larr;</span> Capítulo anterior:</strong
          >
          <a href="/conquista-desbloqueada-hipertextista/">Conquista desbloqueada: Hipertextista</a>
        </p>
      
    </nav>
  

    </main>

    


    <elevator-button title="Ir para o menu">
      <a href="#main-menu">
        <span class="sr-only">Ir para o menu</span>
      </a>
    </elevator-button>

    <div class="sticky-footer" style="margin-block-start: auto">
      <div class="promo">
        <div class="container">
          <p class="promo-title">Gostou do livro?</p>
          <div class="stack">
            <p>
              <em>HTML e Pessoas</em> é a tradução de um trabalho feito com
              carinho. Se puder, considere enviar uma doação no Ko-fi para o
              autor original, Blake Watson, e compartilhar o livro nas redes
              sociais.
            </p>

            <p>
              <a href="https://ko-fi.com/blakewatson" class="button"
                >Doar no Ko-fi</a
              >
            </p>

            <p>Confira outros projetos do Blake:</p>
            <ul>
              <li>
                <a href="https://afinestart.me"
                  >Uma extensão minimalista de nova aba</a
                >
              </li>
              <li>
                <a href="https://synthwave.live/">Um site de mix synthwave</a>
              </li>
              <li>
                <a href="https://minimalcharactersheet.com/"
                  >Uma ficha minimalista para D&amp;D</a
                >
              </li>
              <li>
                <a href="https://blakewatson.com">O site pessoal dele</a>
              </li>
            </ul>

            <p class="promo-title mt-xl mb-xs">Prefere ler em inglês?</p>
            <p>
              O original <em>HTML for People</em> está em
              <a href="https://htmlforpeople.com">htmlforpeople.com</a>, escrito
              por Blake Watson. Também existe uma versão em espanhol, graças a
              <a
                href="https://victorhckinthefreeworld.com/2024/12/11/aprende-html-desde-cero-y-crea-tu-propio-sitio-web/"
                >Victorhck</a
              >.
            </p>

            <p class="mb-md">
              <a class="button" href="https://htmlforpeople.com">
                Visitar HTML for People</a
              >
            </p>
          </div>
        </div>
      </div>

      <footer class="site-footer">
        <div class="container">
          <p class="mb-sm">
            <a href="/conquista-desbloqueada-hipertextista#recursos-deste-livro"
              >Recursos</a
            >
            &middot;
            <a href="/printable">Versão para imprimir</a>
            &middot;
            <a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
            &middot;
            <a href="https://blakewatson.com/about">Sobre o autor</a>
          </p>
          <p>
            Livro original de
            <a href="https://blakewatson.com">Blake Watson</a> —
            <a href="https://htmlforpeople.com">HTML for People</a>. Tradução
            para o português do Brasil oferecida por
            <a href="https://pablomurad.com">Pablo Murad</a> e
            <a href="https://portalidea.com.br">Portal IDEA</a>. Licença
            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"
              >CC BY-NC-SA 4.0</a
            >.
          </p>
        </div>
      </footer>
    </div>
  </body>
</html>
all repos — htmlepessoas.com @ gh-pages

Venha aprender HTML com um método simplificado.
