A marcação XHTML em um site deve ser mínima

Seus documentos devem ser estruturados e com um código válido para que você possa aplicar estilos de forma simples e tranquila. Para aplicar estilos em um código XHTML, você precisa de elementos no código. Estes elementos são conhecidos como seletores

Seletores Comuns
Seletores de tipos e seletores descendentes são os tipos mais comuns. Os de tipos, como nome já diz, são usados para selecionar um tipo de elemento como por exemplo um parágrafo, uma âncora ou um título. Simplementes especificando o nome do elemento no CSS. Eles podem ser chamados de seletores de elementos ou seletores simples.

p {color: black;}
a {text-decoration: underline;}
h1 {font-weight: bold;}

Os seletores descendentes permitem selecionar os descendentes de um elemento ou um grupo de elementos. Os descendentes sempre são indicados por um espaço entre o elemento e o alvo. Exemplo do elemento de lista e do elemento de link:

li a {text-decoration: none;}

Esses tipos de elementos, simples e descendentes, são ótimos para aplicar estilos genéricos para todos elementos de uma página. Existem também seletores de ID e classes que são criados por você. Discutimos isso no post IDs e nomes de Classes. Os IDs são indicados com o sinal (#) e de classes pelo (.). Exemplos:

#introducao {font-weight: bold;}
.dataPostagem {color: green;}

<p id="introducao">Seu Texto</p>

<p class="dataPostagem">04-07-2008</p>

Muitos desenvolvedores de CSS ainda atribuem várias classes em seus códigos com o proposito de estilizar cada item. No post Divs e Spans e suas funções falei sobre isso. Porém isso não é necessário. Você pode atribuir um ID para o Div especifico e usar combinações de seletores de tipos, seletores descendentes, seletores de ID ou seletores de Classes.

#primeiroConteudo h1 {font-size: 1.8em;}
#segundoConteudo h1 {font-size: 1.2em;}

<div id="primeiroConteudo">
<h1>Bem Vindos ao meu site!</h1>
...
</div>
<div id="segundoConteudo">
<h1>Novas Notícias</h1>
...
</div>

Um exemplo simples e você verá que com apenas uns 4 a 5 elementos em sua página, poderá fazer combinações incríveis no seu código.
Se você estiver enchendo seu XHTML com várias classes, fique atento, seu código não está bem estruturado. Releia o post Estruturando seu código CSS. Além disso sua página ficará pesada exigindo mais tempo para ser carregada. Em vez de colocar classe para cada elemento, pense sempre no elemento Pai (O elemento ID). Você verá que a única diferença são onde cada elemento aparece na página.

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