Olá!

Neste tutorial vou estar ensiando como fazer um recurso visto no site do MSN que permite mudar a cor de fundo. É bem simples. Primeiro vou mostrar como fazer usando o PHP num outro tutorial utilizando o Javascript.
Para poder acompanhar e recomendado ter conhecimentos de CSS, (X)HTML e PHP.

Primeiramente vamos montar a estrutura em XHTML:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href=""></a></li>
    <li><a class="cor-branca" href=""></a></li>
    <li><a class="cor-amarelo" href=""></a></li>
    <li><a class="cor-azul" href=""></a></li>
    <li><a class="cor-verde" href=""></a></li>
   </ul>
</div>

A estrutura é basicamente isso, ainda falta colocar dentro do atributo href um código que irá fazer a "mágica".

?pag=<?php echo $_GET['pag']; ?>&css=verde

Explicando:

?pag=<?php echo $_GET['pag']; ?> Esté codigo irá ler na URL se há algum link que já tenha sido clicado antes do usuário alterar a cor. Por exemplo: Digamos que o usuário tenha visitado a página Artigos e resolveu trocar a cor. Sem esse código, ao clicar para mudar a cor, ele sairia da página que estava.

&css=verde  Após o sinal de fechamento do php utilizamos o & que é usado para declarar uma nova váriavel na url. Demos o nome de css que será usado pelo php para aplicar a cor clicada, depois do sinal de igual(=) damos o nome da cor.

Entre as tags <a> e </a> coloque o nome da cor ou a imagem respectiva.

A estrutura final do menu ficara assim:

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

Agora vamos ao PHP criar o código que irá ler na url a váriavel que foi clicada.

<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;
} 
?>

Na primeira linha após a abertura da tag do php, declarei uma variavel que irá receber o que estiver na url.
Na segunda linha, iniciei com a estrutura condicional switch que irá buscar dentro do escopo do código o valor correspondente ao da url, quando encontrada escreverá dentro das tags <style> e </style> o codigo para importar o css.
Na ultima linha antes do fechamento das chaves, declarei a palavra-chave default que irá escrever o css padrão caso nenhum seja encontrado, ou seja, quando o usuario entrar no site pela primeita vez.

O código completo ficará assim:

<style type="text/css" media="screen">
<!--
<?php
$css = $_GET['css'];
switch ($css)
{
 case 'preto':  echo "@import url('css/cor_preto.css');";   break;
 case 'branco':  echo "@import url('css/cor_branco.css');";   break;
 case 'amarelo':  echo "@import url('css/cor_amarelo.css');";  break;
 case 'azul':  echo "@import url('css/cor_azul.css');";   break;
 case 'verde':  echo "@import url('css/cor_verde.css');";   break;
 default:   echo "@import url('css/cor_branco.css');";   break;
} 
?>
-->
</style>

<div class="cor-css">
   <ul>
    <li><a class="cor-preta" href="?pag=<?php echo $_GET['pag']; ?>&css=preto">Preto</a></li>
    <li><a class="cor-branca" href="?pag=<?php echo $_GET['pag']; ?>&css=branco">Branco</a></li>
    <li><a class="cor-amarelo" href="?pag=<?php echo $_GET['pag']; ?>&css=amarelo">Amarelo</a></li>
    <li><a class="cor-azul" href="?pag=<?php echo $_GET['pag']; ?>&css=azul">Azul</a></li>
    <li><a class="cor-verde" href="?pag=<?php echo $_GET['pag']; ?>&css=verde">Verde</a></li>
   </ul>
</div>

O css não e misterio, dentro de cada folha de estilo que você criar para a cor expecifica, deverá conter a padronização para aquela cor. Se o fundo vai ser preto, então as cores terão de ser claras.

Bem simples! No proximo mostrarei como fazer com Javascript. Antes que vocês se faça a pergunta, "Por que não fazer logo com JavaScript?". Resposta: Bom! Podem usar junto com banco de dados, e permitindo que o seu cliente adione novas cores ataves da área adminisrativa. Ou por qualquer outro motivo! Como maior segurança!!!

É isso ai, espro que gostem!

Até++