Os dados devem ser separados da apresentação.

Você deve evitar definir como os dados serão apresentados, quando estiver montando seu código (x)HTML, evite usar fontes, cores etc… dentro da linguagem de marcação.

O (x)HTML deve ser usado para montar a estrutura do seu documento e o CSS dizer como o dispositivo deve exibir essa estrutura.

Não entendeu?

Simples, vamos dizer que eu queira montar um documento que tenha um título, dois parágrafos e uma lista de links dos assuntos relacionados.

Dentro do teria o seguinte código


<h1>Dentro da tag de título, você coloca o título</h1>
<p>Dentro da tag de parágrafo, você coloca o parágrafo, descrevendo o que quer.</p>
<p>Depois você não queria colocar uma lista de links? � exatamente o que usará</p>
<ul>
<li>
<a href="http://www.exemplo.com" title="Exemplo">Exemplo</a>
</li>
<li>
<a href="http://www.exemplo.com" title="Exemplo">Exemplo</a>
</li>
</ul>


Como viu, é tão simples como escrever um documento de texto.

Mas pera ai, vai ficar feio para burro!!!

Para isso que serve o CSS, não tinha dito que os dados e apresentação devem ser separados?

Você cria um outro documento com o CSS e linka ao primeiro, com o seguinte código:


h1 {
font-family: Verdana, Arial;
font-color: #0000ff;
font-size: 12px;
}
p {
font-family: Helvica, Arial;
font-size: 10px;
text-align: justify;
}
ul li{
list-style-type: none;
}

Desta forma, seu código de marcação e dados estará em um arquivo e a definição da apresentação estará em outro.

Ha, tá! Mas o que eu ganho com isso?

• Para mudar todo o layout do site, basta mudar um arquivo.
• Seu site possuirá um layout consistente em todas as páginas.
• Você pode criar versões do seu site para impressão, para dispositivos móveis etc…, mudando apenas um arquivo.
• Seu código ficará mais limpo, facilitando a manutenção.
• Seu site ficará mais leve, pois o CSS é carregado em cache de maneira muito mais eficiente que a formatação feita pelo HTML.
• Suas páginas não serão um amontoado de códigos, facilitando a indexação pelos mecanismos de buscas.

As vantagens não se esgotam nas acima, mas essas são as principais.

Para quem está iniciando o desenvolvimento desta forma, depois de ter se acostumado com a forma anterior, sente um pouco de dificuldade, mas basta um pouco de pratica, para não querer mais fazer da forma anterior.

Para acompanhar os tópicos:

• Considerações sobre tableless