Estilizando o Texto do Website - HTML e CSS na Prática – Guilherme Müller - Web Developer
« Inserindo o Texto do Website
Construindo a Seção Empresa do Website »
Unidade 3 – Trabalhando com Texto – Lição 4
Estilizando o Texto do Website
Após criarmos o arquivo "estilos.css" na unidade 1 e o estruturarmos na unidade 2, finalmente vamos inserir os seus primeiros estilos! Iremos usar alguns dos conhecimentos de CSS que aprendemos para estilizar o texto do nosso website. Lembre-se de consultar o layout como referência.
Uma ferramenta útil para identificar cores em um site é o complemento ColorZilla para Firefox e Chrome.
Vamos começar pelas propriedades mais básicas do texto: cor e fonte. Se você reparar bem, verá que o texto não está 100% preto, e sim um cinza bem escuro. Fiz isso para que fugisse do padrão mesmo e para que pudéssemos aplicar uma cor um pouco diferente à maioria do texto do website. A cor utilizada no layout para os textos é rgb(51,51,51) com quantidades iguais de vermelho, verde e azul; ou seja, um cinza.
Em hexadecimal isso é traduzido para #333333. Como os números hexadecimais 33 para vermelho, 33 para verde e 33 para azul são compostos de números iguais, podemos abreviar isso como #333. Aplicando isso usando a propriedade color na tag body, temos esta cor para todos os elementos de texto do site:
-- Tipografia e Cores
Com CSS3, é possível embutir fontes no site, assim não sendo necessária a instalação por parte do usuário. Este tópico está fora do escopo do curso, mas caso tenha interesse em verificar existem vários sites que oferecem catálogos de fontes prontas para inserção em websites, como o Google Webfonts, que oferece fontes gratuitas para uso.
Com isso temos o texto em cinza escuro para o site inteiro (com outras regras podemos sobrepor esta, como veremos depois).
Agora iremos definir a fonte. É importante utilizarmos fontes comuns que estejam instaladas no computador do usuário; caso contrário, poderá haver alteração de layout devido à substituição de fonte (a não ser que seja utilizado o recurso @font-face da CSS3, veja nota lateral). Neste caso, iremos utilizar a propriedade font-family, também na tag body, para que possamos definir uma fonte padrão para todo o site.
Conforme vimos nesta unidade, podemos especificar uma sequência de fontes em ordem de preferência, conhecidas como font stacks (ou "pilha" de fontes). Desenvolvedores por todo o mundo já elaboraram sequências de fontes otimizadas para diferentes situações e, para este site, escolhi uma do artigo 8 Definitive Font Stacks , do Sitepoint. A sequência no código abaixo prevê fontes instaladas no Windows, Mac OS e Linux, além da especificação genérica sans-serif, no caso improvável de nenhuma fonte da lista estar instalada no computador do usuário.
Além da tag body, aplicamos a regra também para os elementos de formulário input, select e textarea. Dependendo do navegador, eles podem trazer fontes padrão que não seriam sobrescritas apenas pela regra na tag body. Por isso, a regra aplicada a várias tags abaixo:
/* fonte: http://www.sitepoint.com/eight-definitive-font-stacks-2/ */
Em seguida, definimos os estilos de links: normais, visitados, com estado "hover" (quando o cursos do mouse está em cima), focados (através da tecla "Tab" do teclado) e ativos (com o clique ou a tecla "Enter"):
color: #0F599F;
Uma das tags mais utilizadas para texto é a p. Vamos definir estilos básicos como tamanho de fonte, margem posterior e entrelinhas para uma leitura mais confortável:
Agora definimos estilos básicos para os títulos da div "conteudo-principal". Aproveito para fazer um "reset" de um estilo padrão dos navegadores: negrito para os títulos. Como geralmente os títulos já são utilizados em tamanho grande, geralmente deixá-los em negrito acaba tornando o visual muito pesado. Por isso, podemos colocar na seção "Padrões e Reset" do arquivo CSS esta regra, pois sobrepõe um estilo padrão dos navegadores.
-- Padrões e Reset
#conteudo-principal h1 {
#conteudo-principal h2 {
Como o título h2 do conteúdo principal e o h1 do conteúdo secundário usam as mesmas definições de tamanho de fonte e margem, podemos utilizar a mesma regra e usar dois seletores, apenas separando-os com uma vírgula. Já para os parágrafos do conteúdo secundário, reduzimos um pouco a fonte, conforme o layout. Propriedades como cor e margens serão herdadas das regras que já fizemos para as tags body e p, respectivamente:
/* modificando a regra anterior */
#conteudo-principal h2,
#conteudo-secundario h1 {
#conteudo-secundario p {
Para finalizar os estilos gerais de texto, definimos algumas regras para listas ordenadas e não ordenadas dentro do conteúdo principal. A primeira regra define tamanho de fonte e margens (além da margem de baixo, margem também na esquerda para indentar a lista dentro do conteúdo). A segunda regra usa a propriedade list-style-type para deixar os itens de lista pontuados com um quadrado. Outros valores incluem, para ul, circle (círculo), disc (disco, valor padrão), entre outros; para ol, decimal (números, valor padrão), lower-alpha (a, b, c), entre outros.
#conteudo-principal ul,
#conteudo-principal ol {
#conteudo-principal ul {
#conteudo-principal li {
Com isso, temos a base de CSS para todo o texto do site. O código completo das seções "Padrões e Reset" e "Tipografia e Cores" do arquivo "estilos.css" até agora está abaixo: