--- title: 'Básico de CSS' summary: 'Aprenda a criar uma página limpa e bem desenhada do zero, escrevendo o seu próprio CSS.' permalink: 'basico-de-css/' originalPath: /css-basics/ tags: chapter layout: 'chapter.njk' --- # Básico de CSS Neste capítulo, não vamos usar o nosso site com Simple.css. Vamos escrever os nossos próprios estilos, e para isso eu quero usar uma página mais simples. Você pode aplicar o que aprender aqui ao seu site Simple. Mas, neste capítulo, eu quero mostrar como começar do zero para fazer uma página bonita. Vamos olhar especificamente o estilo de elementos tipográficos, para fazer uma página agradável de ler. Mas o CSS pode fazer muito, muito mais. Todos os designs sofisticados que você está acostumado a ver em páginas pela web são feitos com CSS. É uma ferramenta potente. Se este capítulo te der gosto pelo assunto, eu te animo a explorar o CSS além do que cobrimos aqui. ## Apresentando os planetas do sistema solar Eu montei esta página HTML bem direta, que usa alguns elementos tipográficos e é um bom ponto de partida para aplicar estilos. Você pode usar o conteúdo que quiser, se tiver algo em mente. Mas também pode usar a mesma página HTML que eu vou usar. Você pode ver o código-fonte no navegador, com o [comando de ver o código-fonte](https://perma.cc/3WP3-R9XL), ou conferindo o [código no GitHub](https://github.com/blakewatson/css-basics). E você pode [ver o resultado final aqui](https://planets.htmlforpeople.com/), se quiser uma espiada do que vai ficar. Esta página apresenta os planetas do sistema solar e dá um pouco de informação sobre cada um. É super simples e básica de propósito. É um texto de preenchimento que eu não pretendo que ninguém leia a sério (mas as informações estão corretas, até onde eu sei). ## Ponto de partida Eu fiz um `index.html` e coloquei o código a seguir. Ele assume que você tem um `styles.css` no mesmo diretório. Também assume que você tem uma imagem, `PIA06193~large.jpg`, no mesmo diretório. Você pode pegar esta imagem no [site da NASA](https://perma.cc/76GH-PWHQ).
Abra para ver o código HTML completo ```html Planets of the Solar System

Planets of the Solar System

Our solar system 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 CSS while doing it).

Mercury

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.

Venus

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.

Earth

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.

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.

— Carl Sagan

Mars

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.

Jupiter

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.

Saturn

Saturn, the sixth planet from the Sun, is famous for its extensive ring system. It's the second-largest planet in the solar system.

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.
Source: https://images.nasa.gov/details/PIA11141

Uranus

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.

Neptune

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.

Additional Resources

For more information about the planets, visit the NASA Solar System Exploration website.

Other Major Bodies

Sample Code

function getPlanetInfo(planet) {
    const planets = {
        Mercury: 'The smallest planet and closest to the Sun.',
        Venus: 'Known for its thick, toxic atmosphere.',
        Earth: 'The only planet known to support life.',
        Mars: 'The Red Planet with the largest volcano.',
        Jupiter: 'The largest planet with a Great Red Spot.',
        Saturn: 'Famous for its ring system.',
        Uranus: 'Unique for its sideways rotation.',
        Neptune: 'Known for its deep blue color and strong winds.'
    };
    return planets[planet] || 'Planet not found';

}
Como o arquivo `styles.css` está vazio, só temos os estilos padrão do navegador. É assim que fica: ![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.](/assets/img/css-basics-01.webp) O bom e velho Times New Roman e linhas de texto que ocupam a largura inteira da janela do navegador. Não fica grande coisa, mas tem algo gostoso e simples nisso. E, o mais importante, não está quebrado. Muitos sites vão longe demais, com designs exagerados, megabytes de imagens e JavaScript, e comportamentos hostis a quem visita (sabe, tipo: “eu vi que você só leu duas frases deste artigo, mas eu sei que você está morrendo de vontade de assinar a minha newsletter, então deixa eu te mostrar este pop-up gigante”). Então vamos nos imaginar um tipo de médicos da web. Primeiro, não vamos fazer mal. Vamos melhorar a leitura da página e deixá-la bonita (bem, o que _eu_ acho bonito, de qualquer forma — sinta-se à vontade para divergir e adicionar os seus próprios estilos conforme formos). Mas vamos evitar qualquer coisa tão drástica que deixe a página mais difícil de ler do que está agora. ## A tag style Podemos escrever CSS direto no arquivo `index.html` usando uma tag HTML especial, ` ... ``` Isso é perfeitamente válido. Mas, se você tiver mais de uma página no site, teria de copiar e colar a tag `