1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 |
---
title: 'Básico de CSS'
summary: 'Aprenda a criar uma página limpa e bem desenhada do zero, escrevendo o seu próprio CSS.'
permalink: 'basico-de-css/'
originalPath: /css-basics/
tags: chapter
layout: 'chapter.njk'
---
# 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](https://perma.cc/3WP3-R9XL), ou conferindo o [código no GitHub](https://github.com/blakewatson/css-basics). E você pode [ver o resultado final aqui](https://planets.htmlforpeople.com/), 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](https://perma.cc/76GH-PWHQ).
<details>
<summary>Abra para ver o código HTML completo</summary>
```html
<!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>
```
</details>
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:
```html
<!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.
```html
<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](https://practicaltypography.com/line-length.html), devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 _caracteres_ de largura.
```css
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.
{% aside 'Observação' %}
Beleza, [não é estritamente 65 caracteres de largura](https://perma.cc/66QM-Q2AF). A unidade `ch` no CSS se baseia na largura do caractere `0` (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres `0`”.
{% endaside %}
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.
```css
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.
```css
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.
```css
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.
```css
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`.
```css
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](https://practicaltypography.com/line-spacing.html) 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](https://perma.cc/7YVZ-53XL), 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 (`*`).
```css
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 **r**oot el**em**ent (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](https://practicaltypography.com/system-fonts.html) e [fontes padrão comuns](https://perma.cc/9BMG-EMTU), 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](http://fonts.google.com/) (grátis) ou [Adobe Fonts](https://fonts.adobe.com) (pago). Há [várias](https://typography.com/webfonts) [opções](https://typenetwork.com/), 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.
```html
<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.
```css
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](/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).
```css
: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.
```css
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.
```css
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.
{% aside 'Observação' %}
Estamos usando [fontes variáveis](https://perma.cc/A75H-V4HJ), então temos mais opções de peso do que `normal` ou `bold`. Experimente 300, 500, 900 [e por aí vai](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
{% endaside %}
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.
```css
:root {
/* ... other code ... */
--link-color: #028090;
/* ... other code ... */
}
```
Vou usar isso para definir a cor de todos os elementos `<a>`, assim:
```css
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.
```css
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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) aqui, mas eu vou de `none`.
Isso nos dá uma interação visual sutil com o link.
<video controls>
<source src="/assets/video/css-basics-1.mp4" type="video/mp4">
Seu navegador não tem suporte à tag de vídeo. O vídeo mostra uma gravação da tela em que eu passo o mouse sobre o link. O sublinhado some e volta conforme eu faço isso.
</video>
## 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.
```html
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.
```css
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.
```css
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_](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model). 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.
```css
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.
```css
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:
```css
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 **r**oot el**em**ent, 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.
```css
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.
```css
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.
```css
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 `display` como `block`. Imagens vêm como `inline` por padrão, mas o comportamento de `block` funciona 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-radius` como `4px` arredonda os cantos da imagem só um pouquinho.
- Por fim, vamos reduzir a margem acima da legenda e reduzir o `font-size` para 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.
```css
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 (`*`).
```css
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.
```css
.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`.
```css
.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](https://practicaltypography.com/small-caps.html), 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](https://en.wikipedia.org/wiki/X-height)).
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](https://csszengarden.com/), em que as pessoas enviam designs com base na mesma marcação.
<figure>
<img src="/assets/img/css-basics-14.webp" alt="Captura de tela de duas páginas do projeto CSS Zen Garden. A página da esquerda tem um design colorido e vibrante, com uma paleta rosa, roxa e laranja. A da direita tem um design minimalista e limpo, com fundo cinza-claro e texto azul. As duas mostram o que o CSS consegue fazer no design.">
<figcaption>Estes dois designs compartilham o mesmo código HTML. <a href="https://www.youtube.com/watch?v=Iloby6ZXRjI">São a mesma foto.</a></figcaption>
</figure>
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.
## A seguir
|
code.pablomurad.com
htmlepessoas.com
Brazilian Portuguese translation of the book HTML for People