basico-de-css/index.html (view raw)
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 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 |
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<title>Básico de CSS</title>
<meta property="og:title" content="Básico de CSS" />
<meta property="og:description" content="Aprenda a criar uma página limpa e bem desenhada do zero, escrevendo o seu próprio 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/basico-de-css/" />
<link rel="alternate" hreflang="pt-BR" href="https://htmlepessoas.com/basico-de-css/" />
<link
rel="alternate"
hreflang="en"
href="https://htmlforpeople.com/css-basics/"
/>
<link
rel="alternate"
hreflang="x-default"
href="https://htmlforpeople.com/css-basics/"
/>
<!-- 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"
>Personalizar o Simple.css</a
>
</li>
<li>
<a href="/basico-de-css" aria-current="page"
>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="basico-de-css" tabindex="-1"><a class="header-anchor" href="#basico-de-css">Básico de CSS</a></h1>
<p>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.</p>
<p>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.</p>
<h2 id="apresentando-os-planetas-do-sistema-solar" tabindex="-1"><a class="header-anchor" href="#apresentando-os-planetas-do-sistema-solar">Apresentando os planetas do sistema solar</a></h2>
<p>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.</p>
<p>Você pode ver o código-fonte no navegador, com o <a href="https://perma.cc/3WP3-R9XL">comando de ver o código-fonte</a>, ou conferindo o <a href="https://github.com/blakewatson/css-basics">código no GitHub</a>. E você pode <a href="https://planets.htmlforpeople.com/">ver o resultado final aqui</a>, se quiser uma espiada do que vai ficar.</p>
<p>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).</p>
<h2 id="ponto-de-partida" tabindex="-1"><a class="header-anchor" href="#ponto-de-partida">Ponto de partida</a></h2>
<p>Eu fiz um <code>index.html</code> e coloquei o código a seguir. Ele assume que você tem um <code>styles.css</code> no mesmo diretório. Também assume que você tem uma imagem, <code>PIA06193~large.jpg</code>, no mesmo diretório. Você pode pegar esta imagem no <a href="https://perma.cc/76GH-PWHQ">site da NASA</a>.</p>
<details>
<summary>Abra para ver o código HTML completo</summary>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>title</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>styles.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"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>intro<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>caps<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Our solar system<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></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 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Mercury<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Venus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Earth<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>blockquote</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>cite</span><span class="token punctuation">></span></span>— Carl Sagan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>cite</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>blockquote</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Mars<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Jupiter<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Saturn<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
Saturn, the sixth planet from the Sun, is famous for its extensive ring
system. It's the second-largest planet in the solar system.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>PIA06193~large.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>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.<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>figcaption</span><span class="token punctuation">></span></span>
Source: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>https://images.nasa.gov/details/PIA11141<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>https://images.nasa.gov/details/PIA11141<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figcaption</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>figure</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Uranus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Neptune<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
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.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Additional Resources<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
For more information about the planets, visit the
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>https://solarsystem.nasa.gov/planets/overview/<span class="token punctuation">"</span></span>
<span class="token punctuation">></span></span>NASA Solar System Exploration<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span>
<span class="token punctuation">></span></span>
website.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Other Major Bodies<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Pluto<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ceres<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Haumea<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Makemake<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Eris<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Ganymede<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Titan<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Europa<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Sample Code<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>pre</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>code</span><span class="token punctuation">></span></span>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';
}<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>code</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>pre</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>
A demo website for learning CSS. Part of <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>https://htmlforpeople.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>HTML for People<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> by <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>https://blakewatson.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Blake Watson<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>. Check out the <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</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>https://github.com/blakewatson/css-basics<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>source code on GitHub<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>.
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
</details>
<p>Como o arquivo <code>styles.css</code> está vazio, só temos os estilos padrão do navegador. É assim que fica:</p>
<p><img src="/assets/img/css-basics-01.webp" alt="Captura de tela do navegador renderizando a página "Planets of the Solar System". Cada planeta tem uma descrição breve, destacando características únicas. A página usa só os estilos padrão do navegador e está completamente sem estilo."></p>
<p>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”).</p>
<p>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 <em>eu</em> 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.</p>
<h2 id="a-tag-style" tabindex="-1"><a class="header-anchor" href="#a-tag-style">A tag style</a></h2>
<p>Podemos escrever CSS direto no arquivo <code>index.html</code> usando uma tag HTML especial, <code><style></code>. Podemos colocar a tag <code><style></code> dentro da seção <code><head></code> do arquivo. Assim:</p>
<pre class="language-html"><code class="language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>My website<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css">
CSS code goes here
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span>
...
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></code></pre>
<p>Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag <code><style></code> 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 <em>ligar</em> esse arquivo a cada página com uma tag <code><link></code> na seção <code><head></code> do site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</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>styles.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></pre>
<h2 id="primeiros-passos-para-melhorar-a-pagina" tabindex="-1"><a class="header-anchor" href="#primeiros-passos-para-melhorar-a-pagina">Primeiros passos para melhorar a página</a></h2>
<p>Se você ainda não fez, crie um arquivo <code>style.css</code>. É 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 <code><link></code> na seção <code><head></code> da página para ligar os estilos à página, como descrito acima.</p>
<p>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 <a href="https://practicaltypography.com/line-length.html">Butterick’s Practical Typography</a>, devemos caber entre dois e três alfabetos numa linha. Eu vou deixar com 65 <em>caracteres</em> de largura.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Esta <em>regra</em> CSS mira o elemento <code><main></code> da nossa página e instrui ele a nunca passar da largura que declaramos.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Beleza, <a href="https://perma.cc/66QM-Q2AF">não é estritamente 65 caracteres de largura</a>. A unidade <code>ch</code> no CSS se baseia na largura do caractere <code>0</code> (zero) na fonte dada. Então, na verdade, estamos dizendo: “não deixe a largura da página passar de 65 caracteres <code>0</code>”.</p>
</aside>
<p>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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Em idiomas da esquerda para a direita, como o português, <code>margin-inline</code> é a margem horizontal, ou esquerda e direita. Ao definir como <code>auto</code>, 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.</p>
<p>Também temos um elemento <code><footer></code> que vive fora do elemento <code><main></code>, então vamos estilizá-lo à parte, com a mesma largura e margem.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>E, para fechar esta linha de raciocínio, vamos impedir que a imagem de Saturno estoure para fora da página.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O <code>max-width</code> 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”.</p>
<p>E agora a nossa página está bem mais agradável.</p>
<p><img src="/assets/img/css-basics-02.webp" alt="A mesma imagem de antes, mas agora a página está centralizada e limitada a uma largura que torna a leitura mais fácil."></p>
<h2 id="anatomia-de-uma-regra-css" tabindex="-1"><a class="header-anchor" href="#anatomia-de-uma-regra-css">Anatomia de uma regra CSS</a></h2>
<p>Olhe uma das nossas regras até agora. Esta regra limita a largura das imagens à largura dos seus contêineres.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">img</span> <span class="token punctuation">{</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O que acontece aqui é uma coisa em duas partes. Primeiro, especificamos quais elementos da página queremos afetar. Essa é a parte antes das chaves (<code>{}</code>). Chama-se <em>seletor</em>, porque <em>seleciona</em> elementos da página para mudar.</p>
<p>A parte dentro das chaves é onde colocamos as propriedades que queremos mudar. Cada declaração consiste numa <em>propriedade</em> e num <em>valor</em>. Neste caso, há uma declaração. A propriedade é <code>max-width</code>, e o valor é <code>100%</code>.</p>
<h2 id="tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos" tabindex="-1"><a class="header-anchor" href="#tamanho-do-texto-altura-da-linha-e-espaco-entre-elementos">Tamanho do texto, altura da linha e espaço entre elementos</a></h2>
<p>O tamanho padrão da fonte é um pouco pequeno. Vou mirar o elemento <code>html</code> (ou seja, o documento inteiro) e definir <code>font-size</code> e <code>line-height</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Uma das unidades que podemos usar para dimensionar coisas é a unidade de pixel, <code>px</code>. Estou descobrindo agora que <code>1px</code> equivale a 1/96 de uma polegada (embora isso varie com a densidade de pixels da tela). Hein. A gente nunca para de aprender.</p>
<p>Há todo tipo de jeito de definir o tamanho do texto. Vamos ver mais alguns daqui a pouco.</p>
<p>Vou definir o <code>line-height</code> usando um valor sem unidade de <code>1.45</code>. É um número que fica bonito. Consulte o <a href="https://practicaltypography.com/line-spacing.html">Butterick’s Practical Typography</a> 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 <code>px</code> por causa de <a href="https://perma.cc/7YVZ-53XL">como os elementos filhos herdam o valor</a>, mas você não precisa se preocupar demais com isso agora.</p>
<p>Seguindo, eu gostaria de garantir que os elementos tenham espaçamento igual entre eles. Vou mirar tudo o que está dentro do elemento <code><main></code> usando um seletor universal, o asterisco (<code>*</code>).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">main *</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token comment">/* or we could use the shortcut syntax like this */</span>
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0 1rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Um seletor pode ser uma cadeia de coisas. Por exemplo, <code>main p</code> seleciona todo elemento <code><p></code> <em>dentro</em> do elemento <code><main></code>. Mas eu quero mirar <em>tudo</em> no elemento <code><main></code>, então uso o asterisco.</p>
<p>Estou definindo a margem acima e abaixo de cada elemento. De forma parecida com <code>margin-inline</code>, que controla o espaço horizontal ao redor dos elementos, <code>margin-block</code> controla o espaço vertical ao redor dos elementos (em idiomas da esquerda para a direita). Estou definindo a margem acima dos elementos como <code>0</code> e a margem abaixo deles como <code>1rem</code>. O <code>rem</code> é uma unidade igual ao tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent (o elemento <code><html></code>). Como eu defini o tamanho da fonte raiz como <code>20px</code>, é isso que o valor de <code>1rem</code> se torna.</p>
<p>O legal da unidade <code>rem</code> é que, ao nos deixar basear valores no tamanho da fonte do documento, ela deixa os designs com uma sensação mais coesa.</p>
<p>O nosso texto está bonito.</p>
<p><img src="/assets/img/css-basics-03.webp" alt="A mesma imagem de antes, mas agora o texto está maior, com uma altura de linha mais generosa."></p>
<p>Nada contra o Times New Roman, mas ele tem uma cara muito… <em>padrão</em>. Dá para fazer melhor.</p>
<h2 id="instalar-webfonts" tabindex="-1"><a class="header-anchor" href="#instalar-webfonts">Instalar webfonts</a></h2>
<p>Você só pode usar uma fonte se quem visita tiver ela disponível no aparelho. Embora existam algumas <a href="https://practicaltypography.com/system-fonts.html">fontes de sistema comuns</a> e <a href="https://perma.cc/9BMG-EMTU">fontes padrão comuns</a>, temos outra opção para personalizar a fonte. <em>Fontes da web</em> (<em>web fonts</em>) 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.</p>
<p>Fontes da web precisam estar num formato específico, e ser <em>instaladas</em> de um certo jeito, por falta de termo melhor. Em geral, as pessoas usam um serviço como <a href="http://fonts.google.com/">Google Fonts</a> (grátis) ou <a href="https://fonts.adobe.com">Adobe Fonts</a> (pago). Há <a href="https://typography.com/webfonts">várias</a> <a href="https://typenetwork.com/">opções</a>, 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.</p>
<p>Para simplificar, vamos usar algumas fontes do Google Fonts. Vá até <a href="http://fonts.google.com">fonts.google.com</a>. Busque “Oswald” e selecione nos resultados. Depois clique em <em>Get Font</em>.</p>
<p><img src="/assets/img/css-basics-04.webp" alt="Captura de tela do site Google Fonts mostrando a fonte "Oswald". O botão "Get font" está destacado com uma seta vermelha. O texto de amostra abaixo diz: "Whereas disregard and contempt for human rights have resulted." O menu do site aparece à esquerda."></p>
<p>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 <em>Get Font</em>.</p>
<p>Quando as duas fontes estiverem selecionadas, clique em <em>Get embed code</em>. Estamos procurando o bloco rotulado <em>Embed code in the <code><head></code> of your html</em>.</p>
<p><img src="/assets/img/css-basics-05.webp" alt="Captura de tela da interface do Google Fonts mostrando os detalhes da fonte "Source Sans 3". Há um botão "Copy code" dentro de uma caixa vermelha destacada, que fornece o código de incorporação para HTML. A interface inclui opções de estilo da fonte e instruções de uso."></p>
<p>Copie e cole o código de incorporação na seção <code><head></code> do seu site.</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>title</span><span class="token punctuation">></span></span>Planets of the Solar System<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>preconnect<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>https://fonts.googleapis.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>preconnect<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>https://fonts.gstatic.com<span class="token punctuation">"</span></span> <span class="token attr-name">crossorigin</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</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>https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap<span class="token punctuation">"</span></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 punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</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>styles.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"></</span>head</span><span class="token punctuation">></span></span></code></pre>
<p>Adicione uma declaração <code>font-family</code> ao bloco <code>html</code> para conferir se está funcionando.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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 <code>sans-serif</code> instrui o navegador a usar qualquer fonte sans-serif disponível. Você pode colocar outras fontes alternativas na <em>pilha de fontes</em>. É só separar com vírgulas, como você vê acima.</p>
<p>Recarregue a página, e você deve ver a fonte nova! Mas vamos fazer uma configuração melhor e integrar as duas fontes direito.</p>
<h2 id="configurar-cores-e-variaveis" tabindex="-1"><a class="header-anchor" href="#configurar-cores-e-variaveis">Configurar cores e variáveis</a></h2>
<p>Se você leu o capítulo <a href="/personalizar-o-simple-css">Personalizar o Simple.css</a>, 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).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token property">--text-color</span><span class="token punctuation">:</span> #303036<span class="token punctuation">;</span>
<span class="token property">--muted-text-color</span><span class="token punctuation">:</span> #5e5e67<span class="token punctuation">;</span>
<span class="token property">--heading-color</span><span class="token punctuation">:</span> #cd2807<span class="token punctuation">;</span>
<span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span>
<span class="token property">--background-color</span><span class="token punctuation">:</span> #fffdf7<span class="token punctuation">;</span>
<span class="token property">--heading-font</span><span class="token punctuation">:</span> <span class="token string">'Oswald'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token property">--body-font</span><span class="token punctuation">:</span> <span class="token string">'Source Sans 3'</span><span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Você pode nomear as variáveis como quiser, desde que comecem com <code>--</code>. Aqui, estou definindo várias cores e algumas fontes.</p>
<p>Depois de definidas essas variáveis, posso usá-las para aplicar as fontes e a cor ao texto.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">html</span> <span class="token punctuation">{</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--body-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 1.45<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--background-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Use a função <code>var</code> para usar as variáveis que criamos.</p>
<h2 id="estilos-dos-titulos" tabindex="-1"><a class="header-anchor" href="#estilos-dos-titulos">Estilos dos títulos</a></h2>
<p>Estou usando um <code><h1></code> para o título da página e elementos <code><h2></code> para os subtítulos. Vamos mirar esses e aplicar alguns estilos.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span>
<span class="token property">border-block-start</span><span class="token punctuation">:</span> 10px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 4rem<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">h2</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token property">font-family</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-font<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> normal<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Estou fazendo várias coisas aqui. Estou adicionando um pouco de margem extra acima dos elementos <code><h2></code> e um bom tanto de espaço extra acima do <code><h1></code>.</p>
<p>Eu gosto de como a Oswald — a fonte que estou usando para títulos — fica sem negrito. Então estou definindo <code>font-weight</code> como <code>normal</code> em vez de <code>bold</code>, que é o padrão dos títulos.</p>
<aside class="aside"><p class="aside-label">Observação</p><p>Estamos usando <a href="https://perma.cc/A75H-V4HJ">fontes variáveis</a>, então temos mais opções de peso do que <code>normal</code> ou <code>bold</code>. Experimente 300, 500, 900 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight">e por aí vai</a>.</p>
</aside>
<p>Para o <code><h1></code>, estou mantendo o <code>font-size</code> padrão. Para o <code><h2></code>, estou definindo o <code>font-size</code> como <code>1.2em</code>, ou seja, 1,2 vezes o <em>tamanho de fonte atual</em>.</p>
<p>Algumas mudanças tipográficas transformaram a nossa página, e ela tem uma cara completamente diferente.</p>
<p><img src="/assets/img/css-basics-06.webp" alt="A página intitulada "Planets of the Solar System" recebeu uma atualização de design. A fonte foi mudada, e as cores da fonte foram atualizadas. O fundo foi renovado para combinar com essas mudanças. O cabeçalho agora tem uma borda no topo. A página parece mais polida e desenhada."></p>
<p>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.</p>
<h2 id="links" tabindex="-1"><a class="header-anchor" href="#links">Links</a></h2>
<p>Se você estiver usando o meu documento HTML, vai notar alguns hiperlinks, ou tags <code><a></code>. 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.</p>
<p>Vamos estilizá-los um pouco. Eu escolhi uma cor azul-esverdeada e defini como variável, o que vimos antes.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">:root</span> <span class="token punctuation">{</span>
<span class="token comment">/* ... other code ... */</span>
<span class="token property">--link-color</span><span class="token punctuation">:</span> #028090<span class="token punctuation">;</span>
<span class="token comment">/* ... other code ... */</span>
<span class="token punctuation">}</span></code></pre>
<p>Vou usar isso para definir a cor de todos os elementos <code><a></code>, assim:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">a</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--link-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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.</p>
<p>Vamos usar o seletor de <em>pseudo-classe</em> <code>:hover</code> para montar isso. Esses seletores costumam ser usados para estilizar elementos em estados diferentes — por exemplo, um campo de texto desativado (<code>:disabled</code>) ou, no nosso caso, um link sobre o qual o ponteiro do mouse está passando.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">a:hover</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>A propriedade que queremos é <code>text-decoration</code>. Por padrão, os links têm um <code>text-decoration</code> de <code>underline</code>. Você tem <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration">algumas opções</a> aqui, mas eu vou de <code>none</code>.</p>
<p>Isso nos dá uma interação visual sutil com o link.</p>
<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>
<h2 id="abreviacoes" tabindex="-1"><a class="header-anchor" href="#abreviacoes">Abreviações</a></h2>
<p>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.</p>
<pre class="language-html"><code class="language-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
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>abbr</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Cascading style sheets<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>CSS<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>abbr</span><span class="token punctuation">></span></span> while doing it).</code></pre>
<p>A tag <code><abbr></code> 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 <code>title</code> para o texto completo.</p>
<p>Vamos dar um <code>text-decoration</code> para sugerir que dá para interagir com isso.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">abbr</span> <span class="token punctuation">{</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> underline<span class="token punctuation">;</span>
<span class="token property">text-decoration-style</span><span class="token punctuation">:</span> dotted<span class="token punctuation">;</span>
<span class="token property">text-decoration-color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-decoration-thickness</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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 <code>dotted</code>, para ajudar a diferenciar de um link. Eu decidi aumentar um pouco a espessura também, para ficar mais fácil de ver.</p>
<h2 id="citacoes-em-bloco" tabindex="-1"><a class="header-anchor" href="#citacoes-em-bloco">Citações em bloco</a></h2>
<p>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.</p>
<p>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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">blockquote</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> 1.5rem 0<span class="token punctuation">;</span>
<span class="token property">border-inline-start</span><span class="token punctuation">:</span> 4px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">padding-inline</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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, <code>margin-inline</code> controla as margens esquerda e direita. Estou fornecendo dois valores, <code>1.5rem</code> e <code>0</code>, 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.</p>
<p>Um estilo talvez comum demais de um elemento <code><blockquote></code> é 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 <code>border-inline-start</code>. Lembre-se: <code>inline</code> se refere ao eixo horizontal. E <code>start</code> significa o primeiro (que é a <em>esquerda</em> para mim; <code>end</code> seria o da direita).</p>
<p>Vou definir como uma linha sólida de <code>4px</code> de largura, usando a cor dos títulos, que estabelecemos como a cor de destaque da nossa paleta.</p>
<p>Mas temos um problema. Se parássemos aí, teríamos uma borda encostada no texto. Eca.</p>
<p><img src="/assets/img/css-basics-08.webp" alt="Imagem com texto que descreve brevemente a Terra, incluindo uma citação em bloco mal estilizada de Carl Sagan, em que a borda esquerda encosta no texto."></p>
<p>Felizmente, podemos corrigir isso adicionando um pouco de <code>padding</code>. Vou te dar uma introdução rápida ao <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model"><em>modelo de caixa</em></a>. 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).</p>
<p>Com esse conhecimento, vamos adicionar algum espaço <em>dentro</em> do elemento, o que vai afastar o conteúdo da borda. Vamos deixar o preenchimento esquerdo e o direito iguais, definindo <code>padding-inline</code> com só um valor, <code>1rem</code>, que equivale ao tamanho da fonte do documento.</p>
<p>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.</p>
<p><img src="/assets/img/css-basics-07.webp" alt="A mesma imagem da citação em bloco de antes, mas o espaço entre a borda e o texto foi aumentado, o tamanho do texto foi reduzido, e a cor do texto ficou um cinza sutil."></p>
<p>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.</p>
<h2 id="listas" tabindex="-1"><a class="header-anchor" href="#listas">Listas</a></h2>
<p>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.</p>
<p>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 <code><ul></code> e o elemento <code><ol></code> e dar o mesmo recuo aos dois, fazendo o seguinte.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">ul, ol</span> <span class="token punctuation">{</span>
<span class="token property">padding-inline-start</span><span class="token punctuation">:</span> 1.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Você adiciona vários seletores separando-os com uma vírgula. Isso cria uma <em>lista de seletores</em>. O preenchimento que estamos usando para o efeito de recuo vai ser aplicado a <em>listas não ordenadas</em> (com marcadores) e <em>listas ordenadas</em> (numeradas).</p>
<p>Vamos também ajustar o espaço entre os <em>itens de lista</em> individuais (elementos <code><li></code>). 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 <code>1rem</code> para espaçar os parágrafos e outros elementos, vou usar a metade disso, <code>0.5rem</code>, para a margem de baixo.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span>
<span class="token property">margin-block</span><span class="token punctuation">:</span> 0 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Lembre-se: <code>margin-block</code> é 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:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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 (<code>0.5rem</code> significa 0,5 vezes o tamanho da fonte do <strong>r</strong>oot el<strong>em</strong>ent, que definimos como <code>20px</code>).</p>
<p>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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">li::marker</span> <span class="token punctuation">{</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>O pedaço <code>::marker</code> se chama <em>pseudo-elemento</em>, porque representa um pedaço de um elemento HTML. O <code>::marker</code> é uma parte do <em>item de lista</em>, ou elemento <code><li></code>. 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.</p>
<p><img src="/assets/img/css-basics-09.webp" alt="Captura de tela da lista com marcadores intitulada "Other Major Bodies", com entradas para Pluto, Ceres, Haumea, Makemake, Eris, Ganymede, Titan e Europa. Há mais espaço entre os itens, o que facilita a leitura. Os marcadores estão vermelhos, enquanto o texto está na mesma cor escura."></p>
<p>Ficou bonito!</p>
<h2 id="texto-pre-formatado" tabindex="-1"><a class="header-anchor" href="#texto-pre-formatado">Texto pré-formatado</a></h2>
<p>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.</p>
<p>Em geral, mostramos esse tipo de texto com a tag <code><pre></code> 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><code></code> para indicar que o texto é código de computador. Eu incluí um pouco de código JavaScript relacionado a planetas como exemplo.</p>
<p>Vamos estilizar a tag <code><pre></code> assim.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">pre</span> <span class="token punctuation">{</span>
<span class="token property">padding</span><span class="token punctuation">:</span> 1rem<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> #edebe7<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token property">overflow-x</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.75rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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 <code>border-radius</code> pequeno, que é só um termo chique para quanto queremos arredondar os cantos.</p>
<p>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 <code>auto</code>, o que faz o navegador mostrar uma barra de rolagem horizontal no elemento, se precisar.</p>
<p>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.</p>
<p><img src="/assets/img/css-basics-10.webp" alt="O exemplo de uma função JavaScript chamada recebeu um contêiner de fundo sutil e arredondado, e é exibido numa fonte monoespaçada. Esta função recebe o nome de um planeta como entrada e devolve informações sobre o planeta a partir de um objeto 'planets' definido, que guarda fatos únicos sobre cada planeta."></p>
<h2 id="melhorar-o-estilo-das-imagens" tabindex="-1"><a class="header-anchor" href="#melhorar-o-estilo-das-imagens">Melhorar o estilo das imagens</a></h2>
<p>Aqui vai como a imagem de Saturno está agora.</p>
<p><img src="/assets/img/css-basics-11.webp" alt="A imagem de Saturno, o sexto planeta a partir do Sol, mostra o seu extenso sistema de anéis. O planeta aparece com uma porção na sombra e os anéis parcialmente iluminados. O texto acima da imagem informa a posição e o tamanho de Saturno no sistema solar. A imagem é mais estreita do que a coluna de texto e, por padrão, é retangular, com cantos vivos."></p>
<p>Não está tão ruim, mas parece que a tag <code><figure></code> 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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">figure</span> <span class="token punctuation">{</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figure img</span> <span class="token punctuation">{</span>
<span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">figcaption</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 0.5rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.8rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Vamos remover a margem em linha do <code><figure></code>. 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:</p>
<ul>
<li>Definir <code>display</code> como <code>block</code>. Imagens vêm como <code>inline</code> por padrão, mas o comportamento de <code>block</code> funciona mais como você esperaria de uma imagem assim.</li>
<li>Definir a margem em linha como <code>auto</code>, caso usemos uma imagem menor do que a largura da página — nesse caso, ela fica centralizada.</li>
<li>Definir <code>border-radius</code> como <code>4px</code> arredonda os cantos da imagem só um pouquinho.</li>
<li>Por fim, vamos reduzir a margem acima da legenda e reduzir o <code>font-size</code> para 80% do tamanho da fonte do documento.</li>
</ul>
<p><img src="/assets/img/css-basics-12.webp" alt="A mesma imagem de Saturno de antes, só que a margem foi removida e os cantos da imagem foram arredondados."></p>
<p>Ficou chique! Ajustes pequenos podem fazer uma diferença grande.</p>
<h2 id="o-rodape" tabindex="-1"><a class="header-anchor" href="#o-rodape">O rodapé</a></h2>
<p>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.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-start</span><span class="token punctuation">:</span> 3rem<span class="token punctuation">;</span>
<span class="token property">margin-inline</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token property">padding-block</span><span class="token punctuation">:</span> 1.5rem 3rem<span class="token punctuation">;</span>
<span class="token property">border-block-start</span><span class="token punctuation">:</span> 2px solid <span class="token function">var</span><span class="token punctuation">(</span>--heading-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">max-width</span><span class="token punctuation">:</span> 65ch<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--muted-text-color<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Um pouco disso já deve começar a parecer familiar. Estamos criando alguma margem acima do elemento com <code>margin-block-start</code>. Estamos adicionando uma borda de <code>2px</code> de largura acima do rodapé, usando o nosso vermelho de títulos de sempre. Usando <code>padding-block</code>, 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.</p>
<p>Como já adicionamos a margem que queremos no próprio elemento <code><footer></code>, vamos remover toda a margem das coisas <em>dentro</em> do rodapé. Vamos usar o nosso amigo, o seletor universal (<code>*</code>).</p>
<pre class="language-css"><code class="language-css"><span class="token selector">footer *</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.9rem<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Este seletor vai mirar tudo o que está <em>dentro</em> da tag <code><footer></code>. Vamos definir <code>margin</code> como <code>0</code> e reduzir o texto para 90% do tamanho da fonte do documento.</p>
<h2 id="diversao-tipografica-extra" tabindex="-1"><a class="header-anchor" href="#diversao-tipografica-extra">Diversão tipográfica extra</a></h2>
<p>Poderíamos parar aqui de vez, <em>mas</em>… vamos nos divertir um pouco.</p>
<p>Olhando o primeiro parágrafo na marcação, eu dei a ele uma classe <code>intro</code>. Vamos dar um pouco de ênfase deixando o texto um pouco maior.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.intro</span> <span class="token punctuation">{</span>
<span class="token property">margin-block-end</span><span class="token punctuation">:</span> 2rem<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 1.2em<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>Quando colocamos um ponto antes de um termo num seletor CSS, isso significa que queremos mirar todo elemento que tem aquela classe (uma classe <code>intro</code>, neste caso). Isso vai deixar o <code>font-size</code> maior do que o tamanho de texto padrão do documento. E, com a fonte maior, precisa de um pouco de margem extra embaixo.</p>
<p>Beleza, mas agora vamos ficar <em>bem extra</em>. Olhe a marcação de novo, e você vai notar que eu envolvi as três primeiras palavras numa tag <code><span></code> com uma classe <code>caps</code>.</p>
<pre class="language-css"><code class="language-css"><span class="token selector">.caps</span> <span class="token punctuation">{</span>
<span class="token property">text-transform</span><span class="token punctuation">:</span> uppercase<span class="token punctuation">;</span>
<span class="token property">font-size</span><span class="token punctuation">:</span> 0.78em<span class="token punctuation">;</span>
<span class="token property">font-weight</span><span class="token punctuation">:</span> 600<span class="token punctuation">;</span>
<span class="token property">letter-spacing</span><span class="token punctuation">:</span> 0.1em<span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre>
<p>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 <a href="https://practicaltypography.com/small-caps.html">versalete de verdade</a>, mas dá para fazer uma falsificação decente, já que Source Sans 3 é uma fonte variável.</p>
<p>A declaração <code>text-transform</code> 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 <code>font-size</code>, 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 <a href="https://en.wikipedia.org/wiki/X-height">altura-x</a>).</p>
<p>Para ajudar no equilíbrio, estou aumentando um pouco o <code>font-weight</code>. Além de valores como <code>normal</code> e <code>bold</code>, você pode usar os valores numéricos de 100 a 900 se a fonte suportar — e a nossa fonte variável suporta.</p>
<p>Por fim, você se beneficia de aumentar o espaço entre as letras ao usar todas em maiúsculas. Estou usando a unidade <code>em</code>, que se baseia no <code>font-size</code> atual. Isso é útil porque, se você mudar o <code>font-size</code> no futuro, o espaçamento muda na mesma proporção.</p>
<p><img src="/assets/img/css-basics-13.webp" alt="Captura de tela do título Planets of the Solar System. O texto abaixo descreve o sistema solar. O tamanho do texto foi aumentado, e a primeira frase do parágrafo foi renderizada em versalete."></p>
<p>E aí está. Dos começos humildes como uma página <em>sem estilo</em>, com um charme simples, agora está com cara de artigo de autoridade.</p>
<h2 id="potencial-sem-limite" tabindex="-1"><a class="header-anchor" href="#potencial-sem-limite">Potencial sem limite</a></h2>
<p>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.</p>
<p>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 <a href="https://csszengarden.com/">CSS Zen Garden</a>, em que as pessoas enviam designs com base na mesma marcação.</p>
<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>
<p>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.</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">→</span> Próximo capítulo:</strong>
<a href="/html-reutilizavel-com-php/">HTML reutilizável com PHP</a>
</p>
<p>
<strong
><span role="presentation">←</span> Capítulo anterior:</strong
>
<a href="/personalizar-o-simple-css/">Personalizar o Simple.css</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&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
>
·
<a href="/printable">Versão para imprimir</a>
·
<a href="https://github.com/blakewatson/htmlforpeople">GitHub</a>
·
<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>
|