Aumente o nível do seu documento HTML com CSS
Use CSS para trazer estilo à documentação do seu projeto HTML.
Ao escrever documentação, seja para um projeto de código aberto ou para um projeto de redação técnica, você deve ter dois objetivos: o documento deve ser bem escrito e fácil de ler. O primeiro é abordado por habilidades claras de redação e edição técnica. A segunda pode ser resolvida com algumas alterações simples em um documento HTML.
HyperText Markup Language, ou HTML, é a espinha dorsal da Internet. Desde o surgimento da “World Wide Web” em 1994, todo navegador usa HTML para exibir documentos e sites. E por quase tanto tempo, o HTML tem suportado a folha de estilo, uma adição especial a um documento HTML que define como o texto deve aparecer na tela.
Você pode escrever a documentação do projeto em HTML simples e isso dá conta do recado. No entanto, o estilo HTML simples pode parecer um pouco espartano. Em vez disso, tente adicionar alguns estilos simples a um documento HTML para adicionar um toque especial à documentação e tornar seus documentos mais claros e fáceis de ler.
Definindo um documento HTML
Vamos começar com um documento HTML simples e explorar como adicionar estilos a ele. Um documento HTML vazio contém a definição
Você pode definir uma página em branco com este código HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is a new document</title>
</head>
<body>
</body>
</html>
Em outro artigo sobre como escrever a documentação do projeto em HTML, atualizei um arquivo Leiame de um jogo de tabuleiro de código aberto de texto simples para um documento HTML, usando algumas tags HTML básicas como
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
</head>
<body>
<h1>Simple Senet</h1>
<h2>How to Play</h2>
<p>The game will automatically "throw" the throwing sticks
for you, and display the results in the lower-right corner
of the screen.</p>
<p>If the "throw" is zero, then you lose your turn.</p>
<p>When it's your turn, the game will automatically select
your first piece on the board. You may or may not be
able to make a move with this piece, so select your piece
to move, and hit <i>Space</i> (or <i>Enter</i>) to move
it. You can select using several different methods:</p>
<ul>
<li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
navigate to a specific square.</li>
<li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
and "right" on the board. Note that this will automatically
follow the "backwards S" shape of the board.</li>
<li><em>Tab</em> to select your next piece on the
board.</li>
</ul>
<p>To quit the game at any time, press <b>Q</b> (uppercase
Q) or hit <i>Esc</i>, and the game will prompt if you want
to forfeit the game.</p>
<p>You win if you move all of your pieces off the board
before your opponent. It takes a combination of luck and
strategy!</p>
</body>
</html>
Este documento HTML demonstra alguns elementos de bloco e embutidos comuns usados por escritores técnicos que escrevem com HTML. Os elementos de bloco definem um retângulo ao redor do texto. Parágrafos e títulos são exemplos de elementos de bloco, pois se estendem da esquerda para a direita do documento. Por exemplo,
Você pode aplicar estilo direto a este documento para alterar a fonte, as cores e outros estilos de texto, mas uma maneira mais eficiente de modificar a aparência do documento é aplicar uma folha de estilo ao próprio documento. Você pode fazer isso no elemento
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
<style>
</style>
</head>
<body>
...
</body>
</html>
Definindo estilos
Já que você está começando a aprender sobre folhas de estilo, vamos demonstrar um estilo básico: cor de fundo. Gosto de começar com a cor de fundo porque ajuda a demonstrar elementos de bloco e embutidos. Vamos aplicar uma folha de estilo um tanto chamativa que define uma cor de fundo azul claro para todos os
Você os define usando estilos no bloco element { style; estilo; estilo; ... }
e usa chaves para agrupar vários estilos de texto em uma única definição.
<style>
p { background-color: lightblue; }
ul { background-color: lightgreen; }
b { background-color: yellow; }
i { background-color: pink; }
</style>
Observe que cada estilo termina com ponto e vírgula.
Se você visualizar este documento HTML em um navegador da web, poderá ver como os elementos de bloco
(Jim Hall, CC BY-SA 4.0)
Aplicando estilos
Você pode usar estilos para facilitar a leitura deste documento Leiame. Você está apenas começando a aprender sobre estilos. Você se limitará a alguns elementos de estilo simples:
- background-color para definir a cor de fundo
- color para definir a cor do texto
- font-family para usar uma fonte de texto diferente
- margin-top para adicionar espaço acima de um elemento
- margin-bottom para adicionar espaço abaixo de um elemento
- text-align para alterar a forma como o texto é exibido, como à esquerda, à direita ou centralizado
Vamos recomeçar com sua folha de estilo e aplicar esses novos estilos ao seu documento. Para começar, use uma fonte mais agradável para o seu documento. Se o seu documento HTML não especificar uma fonte, o navegador escolherá uma para você. Dependendo de como o navegador está configurado, pode ser uma fonte serif, como a fonte usada na minha captura de tela, ou uma fonte sans-serif. As fontes serif têm um pequeno traço adicionado a cada letra, o que torna essas fontes muito mais fáceis de ler na impressão. As fontes sem serifa não possuem esse traço extra, o que faz com que o texto pareça mais nítido na tela do computador. Fontes serifadas comuns incluem Garamond ou Times New Roman. Fontes sans-serif populares incluem Roboto e Arial.
Por exemplo, para definir a fonte do corpo do documento como Roboto, use este estilo:
body { font-family: Roboto; }
Ao definir uma fonte, você assume que a pessoa que visualiza seu documento também possui essa fonte instalada. Algumas fontes se tornaram tão comuns que são consideradas de fato fontes "seguras para a Web". Isso inclui fontes sem serifa, como Arial, e fontes com serifa, como Times New Roman. Roboto é uma fonte mais recente e pode não estar disponível em todos os lugares. Portanto, em vez de listar apenas uma fonte, os web designers geralmente colocam uma ou mais fontes “de backup”. Você pode adicionar essas fontes alternativas separando-as com uma vírgula. Por exemplo, se o usuário não tiver a fonte Roboto em seu sistema, você poderá usar Arial para o corpo do texto usando esta definição de estilo:
body { font-family: Roboto, Arial; }
Todos os navegadores da web definem uma fonte padrão com serifa e sem serifa que você pode referenciar com esses nomes. Os usuários podem alterar a fonte que preferem usar para serif e sans-serif, portanto, provavelmente não será a mesma para todos, mas usar serif ou sans-serif em uma lista de fontes geralmente é uma boa ideia. Ao adicionar essa fonte, pelo menos o usuário obtém uma ideia aproximada de como deseja que o documento HTML apareça:
body { font-family: Roboto, Arial, sans-serif; }
Se o nome da fonte tiver mais de uma palavra, você deverá colocá-lo entre aspas. HTML permite que você use aspas simples ou duplas aqui. Defina algumas fontes serifadas para o título e subtítulo, incluindo Times New Roman:
h1 { font-family: "Times New Roman", Garamond, serif; }
h2 { font-family: "Times New Roman", Garamond, serif; }
Observe que o título
h1, h2 { font-family: "Times New Roman", Garamond, serif; }
Ao escrever a documentação, muitos redatores técnicos preferem centralizar o título principal da página. Você pode usar
h1 { text-align: center; }
Para ajudar o texto em negrito e itálico a se destacar, coloque-os em uma cor ligeiramente diferente. Para determinados documentos, posso usar azul escuro para texto em negrito e verde escuro para texto em itálico. Eles são bem próximos do preto, mas com diferenças sutis o suficiente para que a cor chame a atenção do leitor.
b { color: darkblue; }
i { color: darkgreen; }
Finalmente, prefiro adicionar espaçamento extra em torno dos elementos da minha lista, para torná-los mais fáceis de ler. Se cada item da lista tivesse apenas algumas palavras, o espaço extra poderia não importar. Mas o item do meio no meu texto de exemplo é bastante longo e passa para uma segunda linha. O espaço extra ajuda o leitor a ver cada item desta lista com mais clareza. Você pode usar o estilo
li { margin-top: 10px; margin-bottom: 10px; }
Este estilo define uma distância, que indiquei aqui como
Supondo que você realmente queira apenas adicionar uma linha extra em branco entre os elementos da lista, você também pode usar
li { margin-top: 1em; margin-bottom: 1em; }
A lista completa de estilos em seu documento HTML é assim:
<!DOCTYPE html>
<html>
<head>
<title>Simple Senet</title>
<style>
body { font-family: Roboto, Arial, sans-serif; }
h1, h2 { font-family: "Times New Roman", Garamond, serif; }
h1 { text-align: center; }
b { color: darkblue; }
i { color: darkgreen; }
li { margin-top: 1em; margin-bottom: 1em; }
</style>
</head>
<body>
<h1>Simple Senet</h1>
<h2>How to Play</h2>
<p>The game will automatically "throw" the throwing sticks
for you, and display the results in the lower-right corner
of the screen.</p>
<p>If the "throw" is zero, then you lose your turn.</p>
<p>When it's your turn, the game will automatically select
your first piece on the board. You may or may not be
able to make a move with this piece, so select your piece
to move, and hit <i>Space</i> (or <i>Enter</i>) to move
it. You can select using several different methods:</p>
<ul>
<li><i>Up</i>/<i>down</i>/<i>left</i>/<i>right</i> to
navigate to a specific square.</li>
<li>Plus (<b>+</b>) or minus (<b>-</b>) to navigate "left"
and "right" on the board. Note that this will automatically
follow the "backwards S" shape of the board.</li>
<li><em>Tab</em> to select your next piece on the
board.</li>
</ul>
<p>To quit the game at any time, press <b>Q</b> (uppercase
Q) or hit <i>Esc</i>, and the game will prompt if you want
to forfeit the game.</p>
<p>You win if you move all of your pieces off the board
before your opponent. It takes a combination of luck and
strategy!</p>
</body>
</html>
Quando visualizado em um navegador da web, você vê seu documento Leiame em uma fonte sem serifa, com fontes serifadas para o título e o subtítulo. O título da página está centralizado. O texto em negrito e itálico utiliza uma cor ligeiramente diferente que chama a atenção do leitor sem distrair. Finalmente, os itens da sua lista têm espaço extra ao seu redor, tornando cada item mais fácil de ler.
(Jim Hall, CC BY-SA 4.0)
Esta é uma introdução simples ao uso de estilos em redação técnica. Tendo dominado o básico, você pode se interessar pelo Guia HTML da Mozilla. Isso inclui ótimos tutoriais para iniciantes para que você possa aprender como criar suas próprias páginas da web.
Para obter mais informações sobre como funciona o estilo CSS, recomendo o Guia CSS da Mozilla.