Здравствуйте! Заинтересовался сменой цветовой схемы сайта по желанию пользователя.
Сваял вот такое (см приложенную картинку).
Хочу, чтобы при клике на цветном квадратике соответственно менялся и цвет хедера, меню и заголовок статьи.
Код файла php:

<table width="970" border="0" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0">
<tr align="left">
<td width="35%">
<p align="left">Выберите желаемую цветовую схему сайта:</p>
</td>
<td>
<div class="square-red"></div>
<div class="square-orange"></div>
<div class="square-yellow"></div>
<div class="square-green"></div>
<div class="square-blue"></div>
<div class="square-magenta"></div>
</td>
</tr>
</table>

Хедеров нарисую по количеству квадратиков, а файлов CSS что, тоже делать по количеству цветов, типа

style1.css
style2.css
...
style6.css?

И ещё: подскажите, пожалуйста, как рационализировать записи в файле CSS. Там у меня много повторений, за исключением цвета:

.square-red {
	width:10px;
	height:10px;
	background-color:red;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}
.square-orange {
	width:10px;
	height:10px;
	background-color:orange;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}
.square-yellow {
	width:10px;
	height:10px;
	background-color:yellow;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}
.square-green {
	width:10px;
	height:10px;
	background-color:green;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}

Спасибо всем откликнувшимся. Признателен всем, кто поможет явно (прямой подсказкой-кодом) или давшим ссылку на подобные примеры и уроки.

Вот когда-то писал свой велосипед
http://blog.g63.ru/?p=403

Так же Гугл и Яндекс знают ещё примеры, главное не стесняться, спросить их об этом. Гугл и Яндекс не кусаются и не дерутся.

с последним вопросом сам справился (не без помощи гугла):

.square-red,  .square-orange, .square-yellow , .square-green, .square-blue, .square-magenta{
	width:10px;
	height:10px;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}

.square-red	{ background-color:red;}
.square-orange {	background-color:orange;}
.square-yellow {	background-color:yellow;}
.square-green {background-color:green;}
.square-blue {background-color:blue;}
.square-magenta {background-color:magenta;}

За ссылку спасибо, сейчас гляну.

.square {
	width:10px;
	height:10px;
	float: left;
	margin: 2px;
    border-style: solid;
	border-width: 1px;
}

.red	{ background-color:red;}
.orange {	background-color:orange;}
.yellow {	background-color:yellow;}
.green {background-color:green;}
.blue {background-color:blue;}
.magenta {background-color:magenta;}

Я так и делал сначала, но не смог прописать в DIV-ах. Подскажите, пожалуйста, как надо прописать, чтобы в результате были цветные квадратики, окаймлённые черным бордюром.

Через пробел

<div class="square red"></div>

BaNru, огромное спасибо! Я чего только не перепробовал - и точки, и тире, и слеши, а пробел забыл попробовать.

Ну, теперь буду юзать Гугл на предмет управления этими квадратиками. Я так понимаю, что придётся делать несколько файлов CSS для каждого цвета. Ну, примерно так же, как на многоязычных сайтах делаются несколько файлов с одной инфой, но на разных языках. Щёлкнул на флажке Великобритании - и сайт уже на английском, щёлкнул на флажке Японии - и весь сайт в иероглифах...

Или я не прав? Подскажите, как правильно.

а не проще иметь набор css правил и менять например у body или контейнера css класс а остальное у тебя будет сразу менятся

например

.red-disign h2 {color:red}
.blue-disign h2 {color:blue}


и тд, основные стили и в конце набор наследованных

bestxp, большое спасибо за подсказку. Буду искать в этом направлении.

Сегодня в интернете нашел такой код смены цвета фона:

 <table border=0 align=center>
<tr>
<td>
<DIV class=text3>
<form>
<input type=button value="белый"onClick="document.bgColor= 'White'">
<input type=button value="зеленый"onClick="document.bgColor= '#006400'">
<input type=button value="красный"onClick="document.bgColor= '#FF0000'">
<input type=button value="синий"onClick="document.bgColor='#000080'">
<input type=button value="оранжевый"onClick="document.bgColor= '#FFA500'">
</form>
</div>
</td>
</tr>
</table>

Как мне вместо цвета фона подгружать таблицы стилей
style1.css
style2.css и т.д. ?
Возможно ли это?