Se você é como eu, você começou a construir páginas da web quando o código foi escrito no bloco de notas e HTML era tudo o que você precisava saber. E se você é como eu, você está voltando para o design do site e descobrir que, graças à CSSeverything mudou - para o melhor. Em tempos idos, mesas, onde a única ferramenta que você teve para formatar sua página e criar um layout. O design clássico foi um uma linha, tabela 2 colunas. Em uma célula que você colocar o seu menu de navegação, por outro celular que você colocar o seu conteúdo.
Hoje, o uso de tabelas para criar um layout está obsoleta: mesas estão a ser utilizados exclusivamente para o escopo original, apresentando dados em um formato de tabela. Para projetar o layout há uma ferramenta muito mais poderosa e flexível: Cascading Style Sheets, ou CSS. As pessoas não usados para projetar com CSS pode se perguntar como organizar o conteúdo da página sem o conforto de células e tabelas. Mas a verdade é: CSS permite que você projete layouts mais rápido, com mais precisão e menos código do que mesas.
Layouts complexos que requeriam tabelas aninhadas são mais fáceis de codificar e mais fácil de gerir. E mudando algumas linhas de códigos em uma única folha de estilo você pode alterar completamente o layout de todas as páginas do seu site. A lógica do projeto de layout do Web site com CSS é bastante fácil. Dominar esta poderosa ferramenta de design e muito complexo, utilizáveis, atraente páginas é difícil e requer estudo e aplicação. O escopo deste tutorial é muito básico: um guia para você criar uma página duas colunas simples.
Com uma busca rápida no Google você vai encontrar lotes de documentos, tutoriais e guias que irão ajudá-lo a aprender os usos mais avançados de CSS. Atenção: neste tutorial eu vou escrever sobre o código CSS necessário para projetar um layout de exemplo. Não vou explicar em detalhes como funciona CSS, nem as muitas outras opções que lhe dá para afinar todos os detalhes de cada elemento que aparece na sua página. Vamos começar. Os layouts mais populares que você pode encontrar na web pode ser representada pela figura 1.
Em um layout de 2 colunas temos uma área de cabeçalho (com logotipo e nome do site), um Área de navegação (com links para as diversas sub-páginas do site), uma área de conteúdo principal e uma área de rodapé (com créditos, direitos de autor e detalhes de contato)
Você utilizado para gerar o layout usando o seguinte código:.
Se v