O CSS é responsável por formatar e manipular toda informação exibida
pelo HTML, de forma que o layout fique fiel ao que o designer desenhou.
Essa é a explicação básica e resumida sobre a função do CSS.

A idéia principal é não misturar o código de Formatação com a Informação do site.
Elas devem ser independentes, para que as modificações em cada uma não
influenciem o funcionamento da outra. Para isso, você precisa conseguir
selecionar qualquer elemento do HTML pelo CSS.

Aviso: Este primeiro artigo terá como objetivo contextualizar
o assunto. Faremos uma série de artigos sobre seletores, e é importante
entendermos como eles funcionam.

O seletor é o responsável por essa função de selecionar o elemento, a estrutura da sintaxe é exatamente essa:

seletor {
   propriedade: valor;
}

Propriedade e valor são as características que você gostaria de modificar no elemento.
Seletor é o elemento que você irá selecionar no código HTML.

Nesta série de artigos, iremos mostrar como os seletores funcionam e
seus tipos. Começaremos desde o básico até o manipulação de filhos e
seletores complexos.

Aviso aos navegantes: Farei essa série nivelando as possibilidades
por cima. Ou seja, ignorarei solenemente browsers antigos ou que não
suportam algumas possibilidades.

Seletores Agrupados

Quando você deseja fazer com que vários elementos tenham as mesmas
características, você irá agrupá-los em um mesmo seletor. A separação
dos elementos é feita por vírgulas. Veja um exemplo:

strong, em, span {
 color: red;
}

Os elementos STRONG, EM e SPAN terão a mesma cor.

Seletores Encadeados

O CSS trabalha com especificidade. Suponhamos que você queira que o EM tenha cor de letra vermelha, você irá fazer assim:

em {
 color: red;
}

Mas você tem uma série de EMs na página, e talvez você queira que
apenas o EM que está dentro de STRONG fique com a cor vermelha. Você
terá que especificar isso no seu seletor:

strong em {
 color: red;
}

No seletor acima estou dizendo que o EM que está dentro do STRONG
terá cor vermelha. Lê-se da direita para esquerda, porque é a ordem do
HTML. O código HTML seria mais ou menos assim:

<p>
A idéia do Tableless é sem dúvida <strong>melhorar o <em>nosso mercado</em></strong>.
</p>

Um seletor encadeado um pouco mais longo:

.content .post-text p strong em {
 color: red;
}

O HTML deste seletor seria este:

<div class="content">
	<div class="post-text">
		<p>
			A idéia do Tableless é sem dúvida <strong>melhorar o <em>nosso mercado</em></strong>. 
		</p>
	</div>
</div>

Juntando os seletores agrupados e o seletores encadeados, ficaria mais ou menos assim:

.content .post-text p strong em, .content .post-text p strong a {
 color: red;
}

Note que a vírgula separa os elementos. Logo após da vírgula é
iniciado um novo seletor para modificar um outro elemento no HTML.

Se você quer acompanhar essa pequena campanha, veja no Twitter o que nós podemos fazer sem o IE6. Siga o hash #semie6.