---
title: 'Um site com estilo'
summary: 'Aprenda sobre CSS e veja como ligar uma folha de estilo externa, como o Simple.css, ao seu site.'
permalink: 'um-site-com-estilo/'
originalPath: /a-website-with-style/
tags: chapter
layout: 'chapter.njk'
---
# Um site com estilo
Eu acho que o nosso site está legal. A simplicidade quieta dele é acolhedora num mundo cheio de distrações. Mesmo assim, ele parece bem simples e _sem estilo_.
O que a gente está vendo são os estilos padrão do navegador — o jeito que ele mostra texto e imagens quando ninguém deu instruções extras sobre a aparência. Mas a maioria dos sites que você visita não parece assim. Eles foram desenhados para parecer diferentes. Quem desenhou deu instruções: quais fontes usar, quais cores e qual o layout da página.
No mundo do HTML, a gente só se preocupa com _o que as coisas são_ — isto aqui é um título, isto ali é um parágrafo, aqui tem uma imagem, e por aí vai. Para definir _como as coisas parecem_, o navegador usa a linguagem irmã do HTML: Cascading Style Sheets, ou CSS. CSS é a linguagem que diz ao navegador como o site deve parecer — cores, fontes, espaçamento.
Um jeito de incluir CSS é usar a tag `
```
Se você incluir este código em algum lugar da sua página, ele muda a fonte da tag `` — na prática, de todo o texto visível da página. Este conjunto de regras CSS diz: “Use Gill Sans no corpo da página ou, se essa fonte não estiver disponível, use a fonte sans-serif padrão.”
{% aside 'Observação sobre fontes' %}
Fontes serifadas (serif) parecem com isto. Elas têm uns tracinhos pequenos, chamados _serifs_, que saem um pouco dos traços maiores. Você costuma encontrá-las em livros e jornais.
Fontes sans-serif são aquelas sem serifas e, em geral, têm um formato mais simples do que as serifadas. Elas parecem com isto. São populares na web e em interfaces.
Fontes monoespaçadas parecem um pouco com texto de máquina de escrever. Cada letra ocupa a mesma largura, o que ajuda se você quiser alinhar as coisas. São uma escolha popular para mostrar código de computador.
{% endaside %}
Esse é um jeito totalmente válido de usar CSS. Mas você vai ver muita gente colocando as regras de estilo num arquivo separado. Algo como `styles.css`. O motivo principal é que fica mais fácil compartilhar os estilos entre várias páginas — você não precisa copiar e colar a tag `