HTML e CSS na Prática

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.
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.

Home
Home
Empresa
Empresa

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
*/

body {
    color: #333;
}

Visualizar Exemplo

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:

body, input, select, textarea {
    /* fonte: http://www.sitepoint.com/eight-definitive-font-stacks-2/ */
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

Visualizar Exemplo

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"):

a:link {
    color: #0F599F;
}

a:visited {
    color: #666;
}

a:hover {
    color: #000;
    text-decoration: none;
}

a:focus {
    outline: 1px dotted #F00;
}

a:active {
    color: #F00;
}

Visualizar Exemplo

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:

p {
    font-size: 16px;
    margin-bottom: 1.5em;
    line-height: 1.4em;
}

Visualizar Exemplo

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
*/

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/*
-- Tipografia e Cores
*/

[...]

#conteudo-principal h1 {
    font-size: 36px;
    margin-bottom: 0.5em;
}

#conteudo-principal h2 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

Visualizar Exemplo

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 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

#conteudo-secundario p {
    font-size: 14px;
}

Visualizar Exemplo

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 {
    font-size: 16px;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

#conteudo-principal ul {
    list-style-type: square;
}

#conteudo-principal li {
    margin-bottom: 0.3em;
}

Visualizar Exemplo

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:

/*
-- Padrões e Reset
*/

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/*
-- Tipografia e Cores
*/

body {
    color: #333;
}

body, input, select, textarea {
    /* fonte: http://www.sitepoint.com/eight-definitive-font-stacks-2/ */
    font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;
}

a:link {
    color: #0F599F;
}

a:visited {
    color: #666;
}

a:hover {
    color: #000;
    text-decoration: none;
}

a:focus {
    outline: 1px dotted #F00;
}

a:active {
    color: #F00;
}

p {
    font-size: 16px;
    margin-bottom: 1.5em;
    line-height: 1.4em;
}

#conteudo-principal h1 {
    font-size: 36px;
    margin-bottom: 0.5em;
}

#conteudo-principal h2,
#conteudo-secundario h1 {
    font-size: 24px;
    margin-bottom: 0.5em;
}

#conteudo-secundario p {
    font-size: 14px;
}

#conteudo-principal ul,
#conteudo-principal ol {
    font-size: 16px;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

#conteudo-principal ul {
    list-style-type: square;
}

#conteudo-principal li {
    margin-bottom: 0.3em;
}

Visualizar Exemplo

Compre o curso completo por apenas R$ 29,90!
Clique aqui para ter acesso.