Montar uma página com CSS
Vamos realizar um exercício de projeção de uma página web utilizando unicamente folhas de estilo em cascata (CSS), separando completamente o conteúdo do arquivo HTML das definições do aspecto, que serão salvadas em um arquivo .css. Realizaremos o exercício passo a passo, partindo de uma imagem desenhada previamente com um programa de edição gráfica como Photoshop.
Imagens de partida
Trata-se de um desenho simples, porém, onde se encontram elementos distintos e variados com os quais trabalhar.
Desta imagem extraíamos alguns gráficos, que utilizaremos na hora de construir o desenho.
Para os impacientes, temos um link à página do resultado que vamos conseguir realizar no final do artigo. Pode ser bom vê-la para ter uma idéia da onde queremos chegar.
Desenvolvimento da página e a folha de estilos
Vamos gerar os arquivos HTML e CSS de uma vez, mas passo a passo, de forma que possamos explicar as etiquetas e estilos que utilizamos para cada parte da página.
Como primeiro passo, no cabeçalho <head> do documento HTML, linkaremos com uma folha de estilos externa.
<head>
<title>A web do inverno</title>
<link rel=”STYLESHEET” type=”text/css” href=”estilo.css”>
</head>
O corpo da página <body>
Na declaração de estilos CSS, para o corpo da página, definimos uma imagem de fundo “fundo.gif”, que se repetirá por toda a página em um mosaico. Também se definem as margens e o alinhamento do texto, neste caso centrado, para que o conteúdo da página apareça no centro (isto é necessário para Internet Explorer, o centrado em Mozilla e em outros navegadores se realiza na camada principal com o atributo “margin” definido como “auto”).
Ademais, definem-se outros atributos para o corpo da página, que logo herdarão outros elementos, como o tipo de letra ou a cor do texto.
BODY {
background : #C0D9D9 url(images/fundo.gif) repeat;
font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
color : #666666;
margin : 20px 0px 20px 0px;
text-align: center;
}
A camada conteúdo
Geralmente, utiliza-se uma camada principal, a qual chamamos conteúdo. Dentro desta camada se colocam todos os elementos que a página vai ter.
<div id=”conteudo”>
</div>
Nesta camada definimos o alinhamento do texto à esquerda (porque no corpo havíamos centralizado o texto, para que Internet Explorer centralize a camada conteúdo e desejamos que o alinhamento padrão seja à esquerda). Também definimos uma largura de 700px, uma cor de fundo branco e a margem, com o atributo “margin”, o definimos como “auto”, para que Mozilla e outros navegadores centralizem a camada.
#conteudo{
text-align: left;
width: 700px;
background-color : #ffffff;
margin: auto;
}
Aliás, deixamos deliberadamente a borda da camada, que havíamos definido no desenho original. Poderíamos ter definido o atributo “border”, mas isso nos repercute negativamente na montagem em Explorer.