<style>#ChangeStyle{position:relative;z-index:100;}#ChangeStyle td{cursor:pointer;width:10px;height:12px;border:1px solid #000;}#ChangeStyle td i{display:none!important}</style><span class="StyleChang"></span><table cellspacing="8" align=right id='ChangeStyle'><tr>

<td bgcolor=red title="Название Мини-Стиля 1" ><i>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>

<td bgcolor=blue title="Название Мини-Стиля 2"><i>
body {
background:url(http://uploads.ru/i/C/A/K/CAKmh.jpg) repeat blue!important;
}
</i></td>

<td bgcolor=teal title="Название Мини-Стиля 3"><i>
body {
background:url(http://uploads.ru/i/f/9/z/f9z80.jpg) repeat teal!important;
}
</i></td>

</tr></table><script type="text/javascript">$('#ChangeStyle td').each(function(i){$(this).attr("alt",i)});function setcookie(a,b,c){if(c){var d=new Date();d.setDate(d.getDate()+c)}if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toUTCString():'');else return false}function getcookie(a){var b=new RegExp(a+'=([^;]){1,}');var c=b.exec(document.cookie);if(c)c=c[0].split('=');else return false;return c[1]?c[1]:false}function clearSet(L){if(L){setcookie("#ChangeStyle",L,30);$("span.StyleChang").html('<style>'+$("#ChangeStyle td[alt='"+L+"']").find("i").html()+'</style>')}};$('#ChangeStyle td').click(function(){clearSet($(this).attr("alt"))});var Lmem=getcookie("#ChangeStyle");clearSet(Lmem);</script>

<td bgcolor=red title="Название Мини-Стиля N" ><i>
body {
background:url(http://uploads.ru/i/Z/g/3/Zg3Db.gif) repeat red!important;
}
</i></td>

ЗЫ: Применять новые стили можно к любым элементам и к нескольким одновременно ,(* в данном случае пример был для body