Básico de CSS
Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita.
Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui.
Apresentando os planetas do sistema solar
Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar.
Você pode ver o código-fonte no navegador, com o comando de ver o código-fonte, ou conferindo o código no GitHub. E você pode ver o resultado final aqui, se quiser uma espiada do que vai ficar.
Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei).
Ponto de partida
Eu fiz um index.html e coloquei o código a seguir. Ele assume que você tem um styles.css no mesmo diretório. Também assume que você tem uma imagem, PIA06193~large.jpg, no mesmo diretório. Você pode pegar esta imagem no site da NASA.
Abra para ver o código HTML completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Planets of the Solar System</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Planets of the Solar System</h1>
<p class="intro"><span class="caps">Our solar system</span> is a vast and fascinating place, consisting of the Sun and the various celestial bodies that orbit it, including eight major planets. Each planet offers unique characteristics and features. In this article, we will explore the distinctive attributes of each planet, providing an overview of what makes them unique (and learn a little <abbr title="Cascading style sheets">CSS</abbr> while doing it).</p>
<h2>Mercury</h2>
<p>
Mercury is the closest planet to the Sun and the smallest planet in our
solar system. It has a very thin atmosphere and its surface is covered
with craters.
</p>
<h2>Venus</h2>
<p>
Venus is the second planet from the Sun and is known for its thick,
toxic atmosphere and extreme surface temperatures. It's often called
Earth's "sister planet" because of their similar size and composition.
</p>
<h2>Earth</h2>
<p>
Earth is the third planet from the Sun and the only known planet to
support life. It has a diverse climate and surface, with large bodies of
water, mountains, and forests.
</p>
<blockquote>
<p>
The Earth is a very small stage in a vast cosmic arena. Think of the
rivers of blood spilled by all those generals and emperors so that in
glory and triumph they could become the momentary masters of a
fraction of a dot.
</p>
<cite>— Carl Sagan</cite>
</blockquote>
<h2>Mars</h2>
<p>
Mars, the fourth planet from the Sun, is often called the "Red Planet"
due to its reddish appearance. It has the largest volcano and canyon in
the solar system.
</p>
<h2>Jupiter</h2>
<p>
Jupiter is the fifth planet from the Sun and the largest in the solar
system. It has a Great Red Spot, which is a giant storm, and dozens of
moons.
</p>
<h2>Saturn</h2>
<p>
Saturn, the sixth planet from the Sun, is famous for its extensive ring
system. It's the second-largest planet in the solar system.
</p>
<figure>
<img src="PIA06193~large.jpg" alt="This grand mosaic consists of 126 images acquired in a tile-like fashion, covering one end of Saturn's rings to the other and the entire planet in between.">
<figcaption>
Source: <a href="https://images.nasa.gov/details/PIA11141">https://images.nasa.gov/details/PIA11141</a>
</figcaption>
</figure>
<h2>Uranus</h2>
<p>
Uranus is the seventh planet from the Sun and has a unique blue-green
color due to methane in its atmosphere. It rotates on its side, making
it unique among the planets.
</p>
<h2>Neptune</h2>
<p>
Neptune is the eighth and farthest known planet from the Sun in our
solar system. It's known for its deep blue color and strong winds, some
of the fastest in the solar system.
</p>
<h2>Additional Resources</h2>
<p>
For more information about the planets, visit the
<a href="https://solarsystem.nasa.gov/planets/overview/"
>NASA Solar System Exploration</a
>
website.
</p>
<h2>Other Major Bodies</h2>
<ul>
<li>Pluto</li>
<li>Ceres</li>
<li>Haumea</li>
<li>Makemake</li>
<li>Eris</li>
<li>Ganymede</li>
<li>Titan</li>
<li>Europa</li>
</ul>
<h2>Sample Code</h2>
<pre><code>function getPlanetInfo(planet) {
const planets = {
Mercury: 'The smallest planet and closest to the Sun.',
Venus: 'Known for its thick, toxic atmosphere.',
Earth: 'The only planet known to support life.',
Mars: 'The Red Planet with the largest volcano.',
Jupiter: 'The largest planet with a Great Red Spot.',
Saturn: 'Famous for its ring system.',
Uranus: 'Unique for its sideways rotation.',
Neptune: 'Known for its deep blue color and strong winds.'
};
return planets[planet] || 'Planet not found';
}</code></pre>
</main>
<footer>
<p>
A demo website for learning CSS. Part of <a href="https://htmlforpeople.com/">HTML for People</a> by <a href="https://blakewatson.com/">Blake Watson</a>. Check out the <a href="https://github.com/blakewatson/css-basics">source code on GitHub</a>.
</p>
</body>
</html>Como o arquivo styles.css está vazio, só temos os estilos padrão do navegador. É assim que fica:
O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”).
Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que eu acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora.
A tag style
Podemos escrever CSS direto no arquivo index.html usando uma tag HTML especial, <style>. Podemos colocar a tag <style> dentro da seção <head> do arquivo. Assim:
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8">
<style>
CSS code goes here
</style>
</head>
<body>
...
</body>
</html>Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <style> em cada página para ter os mesmos estilos em todas. Em vez disso, é comum colocar todo o CSS num arquivo separado e então ligar esse arquivo a cada página com uma tag <link> na seção <head> do site.
<link rel="stylesheet" href="styles.css">Primeiros passos para melhorar a página
Se você ainda não fez, crie um arquivo style.css. É aqui que vamos escrever todo o nosso CSS personalizado. Se você não estiver usando o meu HTML de partida, vai precisar adicionar a tag <link> na seção <head> da página para ligar os estilos à página, como descrito acima.
Dá para conquistar ganhos grandes logo de cara, com só algumas linhas de CSS. Por exemplo, um problema é que a página fica larga demais numa janela de navegador no desktop. Linhas longas de texto são difíceis de ler. Vamos corrigir isso dando à página uma largura máxima. Segundo o Butterick’s Practical Typography, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 caracteres de largura.
main {
max-width: 65ch;
}Esta regra CSS mira o elemento <main> da nossa página e instrui ele a nunca passar da largura que declaramos.
Ignorando a imagem gigante de Saturno — com a qual vamos lidar daqui a pouco — já ficou bem melhor. Mas o gosto moderno prefere uma página centralizada, então vamos fazer isso enquanto estamos nisso.
main {
margin-inline: auto;
max-width: 65ch;
}Em idiomas da esquerda para a direita, como o português, margin-inline é a margem horizontal, ou esquerda e direita. Ao definir como auto, estamos dizendo: “não me importa quão larga seja a margem esquerda e a direita, só deixe iguais”. O navegador sabe quão larga queremos a página, então calcula a margem necessária para deixar igual dos dois lados, centralizando a página.
Também temos um elemento <footer> que vive fora do elemento <main>, então vamos estilizá-lo à parte, com a mesma largura e margem.
footer {
margin-inline: auto;
max-width: 65ch;
}E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.
img {
max-width: 100%;
}O max-width pode ser declarado como uma porcentagem do elemento que contém. Definir como 100% significa: “não deixe elementos de imagem ficarem mais largos do que os seus contêineres”.
E agora a nossa página está bem mais agradável.
Anatomia de uma regra CSS
Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.
img {
max-width: 100%;
}O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves ({}). Chama-se seletor, porque seleciona elementos da página para mudar.
A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa propriedade e num valor. Neste caso, há uma declaração. A propriedade é max-width, e o valor é 100%.
Tamanho do texto, altura da linha e espaço entre elementos
O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento html (ou seja, o documento inteiro) e definir font-size e line-height.
html {
font-size: 20px;
line-height: 1.45;
}Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, px. Estou descobrindo agora que 1px equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.
Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.
Vou definir o line-height usando um valor sem unidade de 1.45. É um número que fica bonito. Consulte o Butterick’s Practical Typography e o seu próprio olho para achar uma boa altura de linha para a sua fonte específica. Estou usando um número sem unidade em vez de algo como px por causa de como os elementos filhos herdam o valor, mas você não precisa se preocupar demais com isso agora.
Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <main> usando um seletor universal, o asterisco (*).
main * {
margin-block-start: 0;
margin-block-end: 1rem;
/* or we could use the shortcut syntax like this */
margin-block: 0 1rem;
}Um seletor pode ser uma cadeia de coisas. Por exemplo, main p seleciona todo elemento <p> dentro do elemento <main>. Mas eu quero mirar tudo no elemento <main>, então uso o asterisco.
Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com margin-inline, que controla o espaço horizontal ao redor dos elementos, margin-block controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como 0 e a margem abaixo deles como 1rem. O rem é uma unidade igual ao tamanho da fonte do root element (o elemento <html>). Como eu defini o tamanho da fonte raiz como 20px, é isso que o valor de 1rem se torna.
O legal da unidade rem é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.
O nosso texto está bonito.
Nada contra o Times New Roman, mas ele tem uma cara muito… padrão. Dá para fazer melhor.
Instalar webfonts
Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas fontes de sistema comuns e fontes padrão comuns, temos outra opção para personalizar a fonte. Fontes da web (web fonts) são aquelas disponibilizadas ao serem baixadas junto com o resto do seu site. Além do documento, dos arquivos CSS, dos arquivos JavaScript, das imagens e por aí vai, fontes personalizadas também podem ser baixadas.
Fontes da web precisam estar num formato específico, e ser instaladas de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como Google Fonts (grátis) ou Adobe Fonts (pago). Há várias opções, inclusive hospedar as fontes no seu próprio servidor, ao lado dos outros arquivos do site. Só garanta que a licença da fonte cubra isso.
Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até fonts.google.com. Busque “Oswald” e selecione nos resultados. Depois clique em Get Font.
Depois de selecioná-la, não baixe nada ainda. Busque “source sans”. Source Sans 3 é a versão disponível no momento em que eu escrevo. Selecione e clique em Get Font.
Quando as duas fontes estiverem selecionadas, clique em Get embed code. Estamos procurando o bloco rotulado Embed code in the <head> of your html.
Copie e cole o código de incorporação na seção <head> do seu site.
<head>
<meta charset="UTF-8">
<title>Planets of the Solar System</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>Adicione uma declaração font-family ao bloco html para conferir se está funcionando.
html {
font-family: 'Source Sans 3', sans-serif;
font-size: 20px;
line-height: 1.45;
}Isso vai definir a fonte para o documento inteiro. O navegador primeiro tenta Source Sans 3. Se, por algum motivo, essa fonte não estiver disponível (se, por exemplo, o Google Fonts estiver fora do ar), então sans-serif instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na pilha de fontes. É só separar com vírgulas, como você vê acima.
Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.
Configurar cores e variáveis
Se você leu o capítulo Personalizar o Simple.css, vai lembrar que ele usava variáveis CSS para controlar cor e fontes. Vamos fazer isso aqui também. Isso vai facilitar personalizar depois (o que você pode querer fazer se não gostar das minhas escolhas).
:root {
--text-color: #303036;
--muted-text-color: #5e5e67;
--heading-color: #cd2807;
--link-color: #028090;
--background-color: #fffdf7;
--heading-font: 'Oswald', sans-serif;
--body-font: 'Source Sans 3', sans-serif;
}Você pode nomear as variáveis como quiser, desde que comecem com --. Aqui, estou definindo várias cores e algumas fontes.
Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.
html {
font-family: var(--body-font);
font-size: 20px;
line-height: 1.45;
color: var(--text-color);
background-color: var(--background-color);
}Use a função var para usar as variáveis que criamos.
Estilos dos títulos
Estou usando um <h1> para o título da página e elementos <h2> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.
h1 {
border-block-start: 10px solid var(--heading-color);
margin-block-start: 4rem;
margin-block-end: 2rem;
font-family: var(--heading-font);
font-weight: normal;
}
h2 {
margin-block-start: 1.5rem;
margin-block-end: 0.5rem;
font-family: var(--heading-font);
font-size: 1.2em;
font-weight: normal;
color: var(--heading-color);
}Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <h2> e um bom tanto de espaço extra acima do <h1>.
Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo font-weight como normal em vez de bold, que é o padrão dos títulos.
Para o <h1>, estou mantendo o font-size padrão. Para o <h2>, estou definindo o font-size como 1.2em, ou seja, 1,2 vezes o tamanho de fonte atual.
Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.
Quase poderíamos parar aqui. Não tem nada de tão terrível acontecendo. Mas vamos estilizar alguns dos elementos que ainda não cobrimos.
Links
Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <a>. Um aponta para a fonte da imagem de Saturno que eu usei, e o outro para o site NASA Solar System Exploration. O resto está no rodapé do site.
Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.
:root {
/* ... other code ... */
--link-color: #028090;
/* ... other code ... */
}Vou usar isso para definir a cor de todos os elementos <a>, assim:
a {
color: var(--link-color);
}Não é uma regra rígida, mas a maioria das pessoas associa texto azul sublinhado a um link clicável. Eu decidi não me afastar demais disso. Mas eu gostaria de adicionar um efeitozinho em que o sublinhado some quando eu passo o mouse por cima.
Vamos usar o seletor de pseudo-classe :hover para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (:disabled) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.
a:hover {
text-decoration: none;
}A propriedade que queremos é text-decoration. Por padrão, os links têm um text-decoration de underline. Você tem algumas opções aqui, mas eu vou de none.
Isso nos dá uma interação visual sutil com o link.
Abreviações
Falando de efeitos ao passar o mouse, há um que você pode não ter notado. Se olhar o HTML no primeiro parágrafo, vai encontrar a seguinte frase.
In this article, we will explore the distinctive attributes of each planet,
providing an overview of what makes them unique (and learn a little
<abbr title="Cascading style sheets">CSS</abbr> while doing it).A tag <abbr> ajuda quem visita a saber o que certas abreviações ou siglas significam. Quando você passa o mouse sobre o termo CSS no documento, recebe uma dica útil mostrando o significado. Você coloca a abreviação dentro das tags e usa o atributo title para o texto completo.
Vamos dar um text-decoration para sugerir que dá para interagir com isso.
abbr {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-color: var(--heading-color);
text-decoration-thickness: 2px;
}Estamos dando um sublinhado, como os links têm por padrão. Mas vamos deixar na cor vermelha que estamos usando para títulos e usar o estilo dotted, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.
Citações em bloco
Eu seria irresponsável se não citasse Carl Sagan num artigo sobre o sistema solar — mesmo que isto seja só uma demo técnica. Então incluí um trecho épico dele na seção sobre a Terra.
Já está servindo como está — já vem recuado e parece uma citação. Mas dá para melhorar, com certeza. Vou te mostrar o código e depois explicar o que estou fazendo.
blockquote {
margin-inline: 1.5rem 0;
border-inline-start: 4px solid var(--heading-color);
padding-inline: 1rem;
font-size: 0.9rem;
color: var(--muted-text-color);
}Eu quero controlar o recuo e deixá-lo mais consistente, baseando-o no tamanho da fonte do documento. Em idiomas da esquerda para a direita, margin-inline controla as margens esquerda e direita. Estou fornecendo dois valores, 1.5rem e 0, para especificar as margens esquerda e direita, respectivamente. A margem esquerda vai ser 1,5 vezes o tamanho da fonte do documento, e vamos remover a margem direita por completo.
Um estilo talvez comum demais de um elemento <blockquote> é dar a ele uma borda esquerda grossa que usa um destaque. Não vejo motivo para ser inconformista aqui, então vou colocar uma borda esquerda usando border-inline-start. Lembre-se: inline se refere ao eixo horizontal. E start significa o primeiro (que é a esquerda para mim; end seria o da direita).
Vou definir como uma linha sólida de 4px de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.
Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.
Felizmente, podemos corrigir isso adicionando um pouco de padding. Vou te dar uma introdução rápida ao modelo de caixa. Todo elemento tem espaço do lado de fora (margem), espaço ao redor do lado de dentro (preenchimento) e uma camada opcional que separa os dois (a borda).
Com esse conhecimento, vamos adicionar algum espaço dentro do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo padding-inline com só um valor, 1rem, que equivale ao tamanho da fonte do documento.
Por fim, vou arredondar o efeito deixando o tamanho da fonte um pouco menor e a cor do texto um pouco mais clara. O resultado final é uma citação em bloco bonita, com um toque de estilo.
Eu desenhei este estilo de citação para caber na maioria dos casos, mas você poderia ir em outra direção — chamadas curtas com texto grande e itálico, por exemplo.
Listas
Vamos resolver rápido a lista com marcadores de Plutão e companhia. Vamos dar à lista um pouco de recuo, como é comum em listas com marcadores. Lembre-se: o HTML também tem listas numeradas. Não estamos usando uma nesta página (se você estiver usando a minha marcação HTML), mas podemos escrever o estilo para os dois tipos de lista.
Você já sabe que o seletor mira os elementos que queremos estilizar. Mas você também pode ter vários seletores! Podemos mirar o elemento <ul> e o elemento <ol> e dar o mesmo recuo aos dois, fazendo o seguinte.
ul, ol {
padding-inline-start: 1.5rem;
}Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma lista de seletores. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a listas não ordenadas (com marcadores) e listas ordenadas (numeradas).
Vamos também ajustar o espaço entre os itens de lista individuais (elementos <li>). Eu gosto de usar a metade do que uso para parágrafos, porque quero os itens de lista mais juntos do que os parágrafos, mas ainda com um pouco de espaço entre eles. Como usei 1rem para espaçar os parágrafos e outros elementos, vou usar a metade disso, 0.5rem, para a margem de baixo.
li {
margin-block: 0 0.5rem;
}Lembre-se: margin-block é a margem de cima e de baixo num idioma da esquerda para a direita, como o português. Podemos definir os dois valores ao mesmo tempo. O trecho acima equivale a:
li {
margin-block-start: 0;
margin-block-end: 0.5rem;
}Isso significa que, em idiomas da esquerda para a direita, a margem acima do item de lista é zero, e a margem abaixo é uns dez pixels (0.5rem significa 0,5 vezes o tamanho da fonte do root element, que definimos como 20px).
O espaçamento deve estar bem bonito agora, mas vamos fazer uma coisa que deixaria designers web dos anos 2000 com inveja. Vamos mudar a cor dos marcadores. Isso era complicado, mas agora é moleza.
li::marker {
color: var(--heading-color);
}O pedaço ::marker se chama pseudo-elemento, porque representa um pedaço de um elemento HTML. O ::marker é uma parte do item de lista, ou elemento <li>. Ele contém o marcador (ou o número) do item. Podemos mirá-lo com o nosso seletor e mudar a cor para o vermelho dos títulos.
Ficou bonito!
Texto pré-formatado
Na maior parte do tempo, nos nossos documentos HTML, não nos importamos em preservar o espaçamento exato de tudo. Na verdade, isso seria contraproducente, porque em geral recuamos o HTML ou incluímos linhas vazias para deixar o código mais legível. Mas, às vezes, queremos mostrar o texto exatamente como está formatado. Exemplos incluem arte ASCII e código de computador.
Em geral, mostramos esse tipo de texto com a tag <pre> no HTML. Ela preserva todo o espaçamento e usa uma fonte monoespaçada para deixar tudo consistente. Muitas vezes é combinada com a tag <code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.
Vamos estilizar a tag <pre> assim.
pre {
padding: 1rem;
background-color: #edebe7;
border-radius: 4px;
overflow-x: auto;
font-size: 0.75rem;
}Queremos que o código apareça como se estivesse dentro de um contêiner, então vamos dar preenchimento o tempo todo ao redor. Em seguida, vamos definir uma cor de fundo clara, só o bastante visível contra o fundo da página, mas não tão escura a ponto de prejudicar o contraste do texto. Caixas de canto vivo parecem um pouco antinaturais, então vamos adicionar um border-radius pequeno, que é só um termo chique para quanto queremos arredondar os cantos.
Poderíamos ter linhas longas de código, então precisamos especificar o que deve acontecer se uma linha transbordar pela lateral do contêiner. Neste caso, vamos definir como auto, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.
Por fim, código monoespaçado pode parecer grande, então vamos baixar o tom dizendo que deve ter três quartos do tamanho do texto padrão.
Melhorar o estilo das imagens
Aqui vai como a imagem de Saturno está agora.
Não está tão ruim, mas parece que a tag <figure> está adicionando margem dos dois lados. Eu quero que a imagem ocupe a largura toda. Também quero que a legenda da foto fique menor.
figure {
margin-inline: 0;
}
figure img {
display: block;
margin-inline: auto;
border-radius: 4px;
}
figcaption {
margin-block-start: 0.5rem;
font-size: 0.8rem;
}Vamos remover a margem em linha do <figure>. Depois vamos mirar imagens que estão dentro de figures (só temos uma, mas isso pode ser um padrão legal se adicionarmos mais) e fazer o seguinte:
- Definir
displaycomoblock. Imagens vêm comoinlinepor padrão, mas o comportamento deblockfunciona mais como você esperaria de uma imagem assim. - Definir a margem em linha como
auto, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada. - Definir
border-radiuscomo4pxarredonda os cantos da imagem só um pouquinho. - Por fim, vamos reduzir a margem acima da legenda e reduzir o
font-sizepara 80% do tamanho da fonte do documento.
Ficou chique! Ajustes pequenos podem fazer uma diferença grande.
O rodapé
Já temos alguns estilos de rodapé — antes, definimos a largura e garantimos que ficasse centralizado. Mas podemos melhorar dando a ele espaço para respirar, uma bordinha no topo, texto menor e uma cor de texto mais suave.
footer {
margin-block-start: 3rem;
margin-inline: auto;
padding-block: 1.5rem 3rem;
border-block-start: 2px solid var(--heading-color);
max-width: 65ch;
color: var(--muted-text-color);
}Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com margin-block-start. Estamos adicionando uma borda de 2px de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando padding-block, estamos adicionando algum espaço entre o texto e a borda, e um bom pedaço de preenchimento embaixo para dar folga na parte de baixo da página. Por fim, vamos usar a mesma cor de texto suave que usamos na citação em bloco.
Como já adicionamos a margem que queremos no próprio elemento <footer>, vamos remover toda a margem das coisas dentro do rodapé. Vamos usar o nosso amigo, o seletor universal (*).
footer * {
margin: 0;
font-size: 0.9rem;
}Este seletor vai mirar tudo o que está dentro da tag <footer>. Vamos definir margin como 0 e reduzir o texto para 90% do tamanho da fonte do documento.
Diversão tipográfica extra
Poderíamos parar aqui de vez, mas… vamos nos divertir um pouco.
Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe intro. Vamos dar um pouco de ênfase deixando o texto um pouco maior.
.intro {
margin-block-end: 2rem;
font-size: 1.2em;
}Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe intro, neste caso). Isso vai deixar o font-size maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.
Beleza, mas agora vamos ficar bem extra. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <span> com uma classe caps.
.caps {
text-transform: uppercase;
font-size: 0.78em;
font-weight: 600;
letter-spacing: 0.1em;
}Isso vai nos dar aquele efeito chique de livro, em que as primeiras palavras ficam em versalete. Em geral, você ia querer usar uma fonte com versalete de verdade, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.
A declaração text-transform vai deixar todas as letras em maiúsculas. É melhor fazer isso com CSS do que digitar tudo em maiúsculas na mão, porque é mais uma coisa de estilo. Para o font-size, eu só fui mexendo até ficar com a cara certa. No fundo, eu queria que as maiúsculas tivessem a mesma altura das letras minúsculas do texto de introdução (ou seja, a altura-x).
Para ajudar no equilíbrio, estou aumentando um pouco o font-weight. Além de valores como normal e bold, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.
Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade em, que se baseia no font-size atual. Isso é útil porque, se você mudar o font-size no futuro, o espaçamento muda na mesma proporção.
E aí está. Dos começos humildes como uma página sem estilo, com um charme simples, agora está com cara de artigo de autoridade.
Potencial sem limite
Estes são só os estilos que eu escolhi com base nas minhas preferências. Você poderia ir em todo tipo de direção diferente. Não estou necessariamente tentando empurrar um estilo para você — embora eu tenha te apontado para alguns princípios tipográficos geralmente bons de seguir. Eu só queria te dar um gostinho de como você pode aplicar os seus próprios estilos a uma página.
A mágica do CSS é que você poderia pegar o meu HTML exato — sem mudanças — e criar um design completamente diferente a partir do mesmo ponto de partida. Essa é a premissa de um experimento web chamado CSS Zen Garden, em que as pessoas enviam designs com base na mesma marcação.
Espero que este capítulo bônus tenha te dado um gostinho do que é possível com CSS. Assim como com HTML, até um pouco de conhecimento de CSS já vale — uma simples mudança de fonte e cor, por exemplo, pode fazer uma diferença enorme. Eu te animo a continuar explorando CSS se você quiser criar designs personalizados. É uma habilidade recompensadora de ter.