Diferença entre XHTML/HTML e CSS (Folha de Estilos)

Lendo os Blogs que acompanho, me deparei com uma indagação: "Eu não sei a diferença entre XHTML e CSS. Pior ainda, quando explicam eu não entendo nada!".
Sendo assim resolvi tentar ser o menos técnico possível e tentar explicar a diferença entre estas 2 tecnologia que uso diariamente.
Não vou entrar em detalhes de cada linguagem tipo: quem criou, para que criou, etc. Vou ser bem simples na explicação para que todos possam entender como funciona o negócio.

XHTML/HTML:
Quando você quer criar uma página na Internet, sempre irá precisar do XHTML ou HTML para começar seu projeto, porém ele não é necessariamente o primeiro item a ser observado no desenvolvimento. O que quero dizer que você vai precisar definir primeiro a função de cada coisa em seu site. Vou dar um exemplo de uma notícia:

A CSS Padrões entra no mercado de template
Templates para Blogger Profissionais por preços que qualquer um pode comprar.

Este pequeno texto será nossa página. Agora preciso definir a função do título da notícia e do artigo. Para isso usaremos o XHTML/HTML.
Na XHTML existem marcadores que definem o que cada coisa dentro de uma página é, por exemplo, marcadores para títulos: h1, h2, h3, h4, h5, h6.
Este marcadores se diferenciam apenas pela importância de cada um sendo que, h1 é muito mais importante que h2 e assim sucessivamente. Então minha notícia precisa de um título de importância:

<h1>

A CSS Padrões entra no mercado de template

</h1>
<p>Templates para Blogger Profissionais por preços que qualquer um pode comprar.</p>

Bom, no modo mais simples isso é XHTML. Defini o que é o título através dos marcador <H1> e defini o que é um parágrafo através do marcador <p>. Feito isso seu código está bem estruturado para aplicar CSS (folhas de estilos).


CSS ou Folha de Estilos
A parte que mais gosto é esta, A CSS (folha de estilos). Com ela é que se cria o visual do site. Cores, imagens, links coloridos, efeitos Hover, posicionamento dos itens do site, etc.
Não vou aqui passar uma lista de comandos da CSS. A internet está lotada de sites que fazem isso.
Vamos para nossa notícia. Ela tem dois marcadores definidos que podemos aplicar a CSS (folha de estilo): <H1>, <p>; , então vamos por a mão na massa.

Quero que meu título tenha cor vermelha, seja em itálico e esteja centralizado.

h1 { color: red; font-style: italic; text-align: center; }

Quero que meu parágrafo esteja com o texto justificado e que o tamanho da fonte seja pequena, então:

p { text-align: justify; font-size: 62.5%; }

Feito isso você acaba de estilizar sua página através da CSS.

Então para concluir:

A diferença da XHTML para a CSS é que: A XHTML defini a função de cada item na página web e a CSS (folha de estilos), da beleza para este item com efeitos, imagens, cores, etc.

Espero ter sido simples o bastante para que você possa ampliar a aplicação aqui proposta para uma página web real.

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email