Introdução à estilização em HTML

A sua página não precisa ser em preto e branco, nem conter somente texto

Na postagem de hoje teremos uma visão geral de como deixar o seu conteúdo mais atraente e destacar o que você deseja transmitir através do estilo da sua página. Estilo se refere a como o conteúdo é apresentado visualmente na tela e envolve tipos de fontes, cor, cor de fundo, tamanho de fontes e elementos, bordas, sublinhados, contraste, posicionamento e muito mais.

Exemplo de estilização de elementos em html

O argumento style

A primeira forma de estilizar elementos no html que veremos é através do atributo style, que deve ser colocado dentro da tag de abertura do elemento que deverá ser estilizado. Depois do argumento devemos inserir sem espaço, um sinal de igual e abrir e fechar aspas duplas "", entre as aspas duplas podemos digitar qualquer característica ou atributo que queremos estilizar em nosso elemento; Veremos algumas características ou atributos que podemos alterar em nossos elementos:

• cor
• cor de fundo
• alinhamento
• fonte
• estilo de fonte 

etc...

O atributo "color" (cor)

Muitos elementos em html possuem o atributo cor que altera a cor do texto, ele pode ser alterado digitando entre as aspas do elemento style o nome do atributo e o valor desejado, separados por dois pontos, por exemplo: <elemento style="cor:valor_ou_nome_da_cor"

Obs: assim como os demais aspectos na linguagem html, devemos escrever atributos e valores em inglês, que é a língua convencional para desenvolvimento web para a grande maioria das linguagens utilizadas mundialmente.

Assim, para alterar a cor de um cabeçalho <h1> para vermelho devemos escrever o seguinte:
<h1 style="cor:red">Exemplo de texto em vermelho</h1>, lembrando que argumentos precisam ser separados do elemento e de outros argumentos por espaço. Veja na foto inicial o texto em azul, que foi estilizado usando o mesmo princípio explicado, somente o valor do atributo "color" foi configurado para "blue" ao invés de "red".

Não se preocupe em tentar gravar os nomes das cores agora, você poderá consultá-las na internet e veremos outras formas de trabalhar com cor futuramente.

O atributo "background-color" (cor de fundo)

A maioria dos elementos em html tem também  um atributo cor de fundo, que permite alterar a cor por trás do elemento. Exemplos de alguns elementos que possuem cor de fundo: <html>, <body>, <p>, <h1...h6>, <a> etc... não falaremos muitos elementos para não causar confusão, os veremos futuramente. Assim como fizemos com o atributo cor, que altera a cor do texto, podemos alterar a cor de fundo da seguinte maneira:
<h1 style="background-color: gray">Texto com fundo cinza</h1>.

Teste o que está aprendendo, crie um novo documento e adicione parágrafos com textos da sua escolha e altere a cor e cor de fundo deles.

O atributo "text-aligment" (alinhamento de texto)

Assim como nos editores de texto como word, google docs, libreoffice e outros, é possível alterar o alinhamento do texto, porém, para isso precisamos alterar o valor da propriedade "text-aligment" dentro do atributo style do elemento de texto que queremos alinhar e definir o valor desejado: left(esquerda), center(centralizado), right(direita), justify(justificado) etc...

Dando ênfase ao texto usando a tag <em>

Embora não seja uma tag voltada para estilização, ao envolver um texto entre as tags <em>texto</em> o browser irá dar um destaque para enfatizar o texto. O principal benefício do uso da tag <em> como eu disse, não é visual, mas sim que ao utilizar leitores de tela, por exemplo para pessoas com deficiência visual o leitor pronunciará a palavra marcada de forma mais enfática do que o restante do texto, dando assim diferenciação e importância a ela. Visualmente falando o texto marcado com a tag <em>texto com ênfase</em> ficará com visual semelhante ao texto em itálico. 

Texto com ênfase x texto em itálico

Como explicado acima, o texto marcado com ênfase <em>texto com ênfase</em> é visualmente igual ao texto marcado com itálico <i>texto em itálico</i>... e qual a diferença? O texto marcado com ênfase possui um destaque para leitores de tela utilizados por pessoas com deficiências visuais e também são vistos com destaque pelos motores de busca, já o texto marcado com itálico não possui essas particularidades e serve tão somente para fins de estilização. Para estilizar um texto basta usar o atributo estilo como fizemos nos demais casos, porém, devemos configurar o atributo "font-style" (estilo de fonte) e configurá-lo para "italic" (itálico):
<p style="font-style:italic">Texto em itálico</p>.

Lembre-se: se a intenção é apenas alterar o visual do texto para itálico, use as tags <i></i>, porém, se deseja enfatizar um termo ou palavra para que seja apresentado com destaque para leitores de tela e motores de busca, então utilize <em></em>.

Conclusão

Hoje aprendemos como utilizar alguns elementos básicos e veremos outras formas de estilização em postagens futuras. Veremos formas melhores de estilizar nossa página. Pratique o que aprendeu hoje e em caso de dúvida comente. Bons estudos!