Veremos neste tutorial como montar um site em Tableless usando as técnicas de CSS. Você que ainda formata página usando tabelas, não sabe o que anda perdendo diante da poderosa linguagem CSS. Vamos deixar bem claro que a tabela ainda é usada para inserir dados tabulares, mas nunca com o intuito de criar o layout da página. Além disso seu site ficará ágil para modificações posteriores e com um alto nível de acessibilidade. Dividi o tutorial em 5 partes. Então vamos ao que interessa!
Crie um novo documento HTML e salve-a com o nome de index.html. Em seguida vamos criar um novo documento no formato CSS. Salve-a no mesmo diretório da index com o nome de estrutura.css.
Agora vamos adicionar o arquivo CSS na página HTML. Abra a página index.html e adicione o seguinte código dentro da seção head.
<link href="estrutura.css" rel="stylesheet" type="text/css">
Agora nossa folha de estilos está ligada ao documento HTML. O que significa que agora podemos definir o layout da página no documento CSS. Agora vamos editar o CSS. Abra o documento estrutura.css e vamos definir os atributos body da index.html:
body {
margin: 0; /* definimos nenhuma margem para o site */
background-color: #09F; /* definimos uma cor de fundo para a página*/
font-family: "Trebuchet MS, Tahoma, Verdana"; /* definimos uma fonte */
font-size: 12px; /* definimos o tamanho da fonte */
color: #999; /* definimos a cor da fonte */
}
Depois disso abra a página index.html. Você pode observar que a página está com uma cor de fundo azul-clara e o cursor centralizado conforme definimos no documento CSS! Isso quer dizer que está havendo uma conexão da index.html com a estrutura.css.
Por hoje é só! Na próxima parte definiremos o conteúdo da página, bem como o posicionamento dos elementos na página. Valeu galera! Fiquem com Deus!