Passo 10 – Adicionar estilos ao texto

Para já o nosso texto está a “denegrir” a página pois não está lá muito bonito, pois não? Bem, vamos adicionar estes bocados de CSS para corrigir isso:

body {
margin:0px; padding:0px;
background-color:#131211;
font-family:Arial, Helvetica, sans-serif;
color:#7f7d78;
font-size:13px;
line-height:19px;
}

/*
Text-Styles
*/

h2 {
margin:0px 0px 10px 0px;
font-size:36px;
font-family:Helvetica, Arial, Sans-serif;
color:#000000;
}
small {
color:#595856;
font-weight:bold;
font-size:11px;
display:block;
margin-bottom:15px;
}
a {
color:#007de2;
text-decoration:none;
}
a:hover { text-decoration:underline; }
p { margin: 0px 0px 15px 0px; }

a.button {
background:#32312f url(images/button_bg.jpg) repeat-x;
padding:5px 10px 5px 10px;
color: #ffffff;
text-decoration: none;
border:1px solid #32312f;
text-transform:uppercase;
font-size:9px;
line-height:25px;
}
a.button:hover {
background:#007de2 url(images/button_bg_o.jpg) repeat-x;
border-color:#007de2;
}

Mais umas notas:

1. Actualizámos o campo “body” para que tenha, como padrão, uma fonte, cor, tamanho e altura de linha.

2. Depois criámos um estilo para a tag <h2> que corrige as margens e altera a fonte para Helvetica.

3. Também criámos um estilo para a tag <small>, para os sub-títulos.

4. Criámos os estilos para o “link” e o “link:hover”.

5. Corrigimos as margens das tags <p>.

6. Finalmente, criámos a classe “button”. Note que definimos como “a.button”, por outras palavras, todas as tags <a> que tenham como classe=”button”. Porque não fazer logo “.button”? Pode ser que mais para a frente eu queira fazer uma classe de botões para outras ferramentas.

7. Na classe “button” nós temos padding, uma borda, umas imagem de fundo, um estilo para o hover e o atributo de altura de linha… altura de linha?! Sim, isto é para corrigir um bug do IE…

Com todo este CSS, a nossa página está assim:

Partilhar esta Entrada