Layout CSS

Antes de iniciar este tutorial certifique-se de que você já possua um conhecimento básico sobre o CSS lendo o meu RESUMO
CSS. Muitos itens serão abordados somente para estudo, muita coisa não é aconselhável para os mais experientes.

Primeiramente tenha em mente que para a construção de um layout por meio do CSS é preciso definir blocos (chamados de containers) em uma página, como a antiga técnica html de tabelas e formatações, dessa forma temos quadrados, retângulos e objetos que constroem o layout, pense assim para perceber que o CSS vai organizar tudo pra você dentro de um simples texto. Todos os textos, vídeos, imagens, enfim, todos os elementos da página estarão definidos dentro dos blocos. Esses blocos são chamados de selecionadores.
Então o primeiro passo é darmos os nomes para os SELECIONADORES.

Então, como podemos observar, os selecionadores (ou blocos) DEVEM ser definidos de acordo com o nosso gosto, e claros, com o nosso conhecimento de DESIGN. Acho que nunca gostaria de construir um site que todo mundo considere o visual detestável. Vou utilizar como exemplo esta estrutura que esta acima.

Assim vamos dar nomes aos bois...

SELECIONADORES: html body, a, #topo,
.corpoConteudo,
#esquerda,
#meio,
#direita,
.flutuaCoisa
Vamos explicar as opiniões: html body (nesses dois selecionadores definimos o geral, ou seja, como penso numa cor que fica que fica por trás de tudo, ou uma imagem por trás de tudo, se quero margens, ou preenchimento (padding) total dos textos, se meus textos terão uma formatação geral, e etc.) a (nesse selecionador (bloco 2)defino como os meus links se comportarão, por meio do uso das pseudo-classes)
#topo (aqui (bloco 1) eu coloco uma imagem com o logo e nome do site, defino também alguma outra coisa que quero no TOPO da minha página, e pensando nos 800x600px, defino a altura (height) e largura (width) desse bloco)
.corpoConteudo (aqui (bloco 3,4 e 5) eu vou estruturar todo o corpo da página em