Criando um site em "Tableless (CSS)

Hoje iremos aprender como criar um site todo nos padrões Web 2.0, usando apenas CSS (Tableless).
Muita gente tem se perguntado como se faz um site nos padrões web, e realmente existem diversas formas para se criar um site hoje em dia, e uma delas é através do “CSS” Cascading Style Sheet que em português significa (Folhas de estilo em cascata).

A necessidade de se criar “padrões web” é um dos motivos ao qual a W3C, orienta fabricantes, desenvolvedores e projetistas a utilizarem técnicas que seja compatível a todos os dispositivos usados para acessar a web, independente da forma de acesso.

Qual a principal função do CSS?

A principal função do CSS é separar a linguagem de marcação do (HTML) da estrutura do site, ficando responsável unicamente apenas pelo visual do site.

Quais os benefícios do CSS?

Deixar o código, mas simples e limpo possível e alterar facilmente qualquer elemento ou visual do site e ser bastante ágil ao carregar.

Vamos criar um mini-tutorial, resumindo na teoria e pratica uma forma de entender melhor como funciona o “CSS”, e como se deve utilizá-lo na pratica, sem utilizar nenhuma tabela.

Este post é recomendado para as pessoas que já saibam conceitos e utilizem pelo menos o "HTML".

1° – Como construir uma estrutura XHTML, apenas usando

Crie uma nova página “html” e a chame de (index.html) ou qualquer outro que você quiser.

2° Passo:

Vamos criar a estrutura do nosso Template:

Lembrando que o “Adentamento” é fundamental para melhor estrutura do código Html.

3°- Posicionamento da estrutura via CSS (Tableless)

 
Escolha as propriedades, “Fonte”, tamanho da fonte, cor de fundo.

“Em “Box”, a resolução do monitor padrão é “800”, para não criar barra de rolagem horizontal, basta apenas colocar um valor “20” a menos que 800”. No caso “780 px”, independente da resolução do monitor ele não criará barras de rolagem.

Estrutura CSS

Vamos criar a estrutura CSS, e definir os atributos de cada “container” criado.

Estrutura dentro do Código Html

Começando pela div corpo e assim cada uma delas.

Estrutura “CSS” fora do Código Html

Página externa (estilo.css)

Bom pessoal, essa é a idéia de se trabalhar com o CSS, cada vez que você vai chamando um corpo criado, basta apenas ir modificando as páginas adicionando suas caracteristica...!