dieses Script habe ich irgendwo im Netz gefunden und ist auch ganz hilfreich, um die Verbindung von JS mit CSS zu verstehen.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en">
<meta name="author" content="">
<meta http-equiv="Reply-to" content="@.com">
<meta name="generator" content="PhpED 4.5">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="creation-date" content="02/20/2006">
<meta name="revisit-after" content="15 days">
<title>Untitled</title>

<style> 
#header {color:#ffffff; font: italic bold 20pt, arial} 
#wtext {color:#ffffff; font: bold 10pt, arial; text-decoration: underline} 
#inp01 {border: 0px solid; background-color: #CCCCFF; font: 10pt, arial} 
#inp02 {border: 2px solid; background-color: #CCCCFF; font: 10pt, arial; border-style:inset} 
#white {color:#ffffff; font: 10pt, arial} 
</style> 
<script> 
function stil() 
{if (schriftstil.options[schriftstil.selectedIndex].value=='normal') 
{document.all.beispieltext.style.fontWeight='' 
document.all.beispieltext.style.fontStyle='' 
document.all.beispieltext.style.fontStyle='normal'} 
if (schriftstil.options[schriftstil.selectedIndex].value=='italic') 
{document.all.beispieltext.style.fontWeight='' 
document.all.beispieltext.style.fontStyle='' 
document.all.beispieltext.style.fontStyle='italic'} 
if (schriftstil.options[schriftstil.selectedIndex].value=='bold') 
{document.all.beispieltext.style.fontWeight='' 
document.all.beispieltext.style.fontStyle='' 
document.all.beispieltext.style.fontWeight='bold'} 
if (schriftstil.options[schriftstil.selectedIndex].value=='bold-italic') 
{document.all.beispieltext.style.fontWeight='' 
document.all.beispieltext.style.fontStyle='' 
document.all.beispieltext.style.fontWeight='bold' 
document.all.beispieltext.style.fontStyle='italic'}} 

function quelltext() 
{Textart=document.all.beispieltext.style.fontFamily 
Schriftstil='' 
if (document.all.beispieltext.style.fontStyle!='') 
Schriftstil=document.all.beispieltext.style.fontStyle 
if (document.all.beispieltext.style.fontWeight!='') 
Schriftstil=document.all.beispieltext.style.fontWeight 
if (document.all.beispieltext.style.fontWeight=='bold' && document.all.beispieltext.style.fontStyle=='italic') 
Schriftstil=document.all.beispieltext.style.fontWeight+' '+document.all.beispieltext.style.fontStyle 
Textgröße=document.all.beispieltext.style.fontSize 
Zeichenabstand=document.all.beispieltext.style.letterSpacing 
Textdekoration=document.all.beispieltext.style.textDecoration 
Textfarbe=document.all.beispieltext.style.color 
Hintergrundfarbe=document.all.beispieltext.style.backgroundColor 
Rahmen=document.all.beispieltext.style.border 
Mauszeiger=document.all.beispieltext.style.cursor 
quelltext=open("","text","scrollbars=no"); 
quelltext.resizeTo(800,200); 
quelltext.moveTo(0,0); 
quelltext.focus(); 
quelltext.document.open() 
quelltext.document.write('<body bgcolor=f0f0f0 onUnload=opener.location.reload()>') 
quelltext.document.write('<title>--> CSS-Generator 1.0 <-- [quelltext]</title>') 
quelltext.document.write('<span style="font: 10 pt verdana; color:red"><code><style><br>') 
quelltext.document.write('#css_text {font: '+Schriftstil+' '+Textgröße+' , '+Textart+'; letter-spacing: '+Zeichenabstand+'; text-decoration: '+Textdekoration+';<br>') 
quelltext.document.write('           color: '+Textfarbe+'; background-color: '+Hintergrundfarbe+'; border: '+Rahmen+'; cursor: '+Mauszeiger+'}<br>') 
quelltext.document.write('</style><br><br>') 
quelltext.document.write('<span id=css_text>dies hier ist ein beispieltext</span></code><br><br>') 
quelltext.document.write('<span style="font: 08pt; color:black">markieren sie den text, klicken sie rechts auf-><i>kopieren/copy</i><br>') 
quelltext.document.write('klicken sie in ihrem editor-programm rechts auf -><i>einfügen/paste</i>') 
quelltext.document.write('<div align=right style="position:absolute; left: 705; top:147"><input type=button value=schließen onclick=self.close()></div>') 
quelltext.document.close()} 
</script> 

<script> 
function noerror() 
{return true} 
window.onerror=noerror 
</script>




</head>
<body>

<center> 
<table width=500 border=0 cellpadding=0 cellspacing=0 style="border: 2px solid; border-color: #0066ff"> 
<tr> 
<td bgcolor=#0066FF colspan=3 align=center><span id=header>--> CSS-Generator 1.0 <--</span></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Texttart</b></td> 
<td bgcolor=#000066 id=white><select name=schriftart size=1 id=inp01 onchange="document.all.beispieltext.style.fontFamily=schriftart.options[schriftart.selectedIndex].value; schriftstil.focus()"> 
<option value="arial"> Arial 
<option value="comic sans ms"> Comic Sans MS 
<option value="impact"> Impact 
<option value="helvetica"> Helvetica 
<option value="tahoma"> Tahoma 
<option value="times new roman"> Times New Roman 
<option value="verdana"> Verdana 
</select></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Textstil</b></td> 
<td bgcolor=#000066 id=white><select name=schriftstil size=1 id=inp01 onchange="stil();schriftsize.focus(); schriftsize.select()"> 
<option value="normal"> normal 
<option value="italic"> kursiv 
<option value="bold"> fett 
<option value="bold-italic"> fett-kursiv 
</select></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Textgröße</b></td> 
<td bgcolor=#000066 id=white><input type=text name=schriftsize size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.fontSize=schriftsize.value; zeichenabstand.focus(); zeichenabstand.select()}"></td> 
<tr> 
<td bgcolor=#000066 id=white><b>Zeichenabstand</b></td> 
<td bgcolor=#000066 id=white><input type=text name=zeichenabstand size=3 id=inp02 maxlength=3 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.letterSpacing=zeichenabstand.value; textdekoration.focus()}"></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Textdekoration</b></td> 
<td bgcolor=#000066 id=white><select name=textdekoration size=1 id=inp01 onchange="document.all.beispieltext.style.textDecoration=textdekoration.options[textdekoration.selectedIndex].value; textfarbe_r.focus(); textfarbe_r.select()"> 
<option value="none"> normal 
<option value="underline"> unterstrichen 
<option value="overline"> überstrichen 
<option value="line-through"> durchgestrichen 
<option value="underline overline"> unterstrichen-überstrichen 
<option value="underline line-through"> unterstrichen-durchgestrichen 
<option value="line-through overline"> überstrichen-durchgestrichen 
<option value="line-through underline overline"> unterstrichen-überstrichen-durchgestrichen 
</select></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white valign=top><b>Texttfarbe</b></td> 
<td bgcolor=#000066 id=white><input type=text name=textfarbe_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_g.focus(); textfarbe_g.select()}"> 
<input type=text name=textfarbe_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {textfarbe_b.focus(); textfarbe_b.select()}"> 
<input type=text name=textfarbe_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.color=textfarbe_r.value+textfarbe_g.value+textfarbe_b.value; bg_r.focus(); bg_r.select()}"><br> 
 rot   grün  blau  (z.B. 00 66 FF)</td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white valign=top><b>Hintergrundfarbe</b></td> 
<td bgcolor=#000066 id=white><input type=text name=bg_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_g.focus(); bg_g.select()}"> 
<input type=text name=bg_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {bg_b.focus(); bg_b.select()}"> 
<input type=text name=bg_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=bg_r.value+bg_g.value+bg_b.value; rahmentyp.focus()}"><br> 
 rot   grün  blau  (z.B. 00 66 FF)</td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Rahmentyp</b></td> 
<td bgcolor=#000066 id=white><select name=rahmentyp size=1 id=inp01 onchange="document.all.beispieltext.style.borderStyle=rahmentyp.options[rahmentyp.selectedIndex].value; rahmenwidth.focus(); rahmenwidth.select()"> 
<option value="none"> kein rand 
<option value="dotted"> gepunktet 
<option value="dashed"> gestrichelt 
<option value="solid"> durchgezogen 
<option value="double"> doppelt 
<option value="groove"> Draufklebe-Effekt 
<option value="ridge"> Bilderrahmen-Effekt 
<option value="inset"> 3D nach innen 
<option value="outset"> 3D nach außen 
</select></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Rahmenstärke</b></td> 
<td bgcolor=#000066 id=white><input type=text name=rahmenwidth size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.borderWidth=rahmenwidth.value; b_r.focus(); b_r.select()}"></td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white valign=top><b>Rahmenfarbe</b></td> 
<td bgcolor=#000066 id=white><input type=text name=b_r size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_g.focus(); b_g.select()}"> 
<input type=text name=b_g size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {b_b.focus(); b_b.select()}"> 
<input type=text name=b_b size=2 id=inp02 maxlength=2 onkeydown="if (window.event.keyCode==13) {document.all.beispieltext.style.backgroundColor=b_r.value+b_g.value+b_b.value; cursor.focus()}"><br> 
 rot   grün  blau  (z.B. 00 66 FF)</td> 
</tr> 
<tr> 
<td bgcolor=#000066 id=white><b>Mauszeiger</b></td> 
<td bgcolor=#000066 id=white><select name=cursor size=1 id=inp01 onchange="document.all.beispieltext.style.cursor=cursor.options[cursor.selectedIndex].value; document.all.beispieltext.focus()"> 
<option value="default"> normal 
<option value="hand"> Hand 
<option value="crosshair"> Präzision 
<option value="text"> Textfeld 
<option value="wait"> Sanduhr 
<option value="help"> Hilfe 
<option value="move"> Verschiebungs-Kreuz 
<option value="n-resize"> Verschiebungspfeil (nach oben) 
<option value="ne-resize"> Verschiebungspfeil (nach oben rechts) 
<option value="e-resize"> Verschiebungspfeil (nach rechts) 
<option value="se-resize"> Verschiebungspfeil (nach unten rechts) 
<option value="s-resize"> Verschiebungspfeil (nach unten) 
<option value="w-resize"> Verschiebungspfeil (nach links) 
<option value="nw-resize"> Verschiebungspfeil (nach link oben) 
</select></td> 
</tr> 
<tr> 
<td colspan=2 style="border-top: 2px solid; border-color: #0060ff"> </td> 
</tr> 
<tr> 
<td colspan=2 align=center><span id=beispieltext style="font: 10pt; decoration: none; border:; border-color:; height=20%; margin:10; margin-top:0">dies hier ist ein beispieltext</span> 
<span id=wtext style="background-color:#0066ff; font: 10pt, arial; width=500"><b style="cursor:hand" onclick=quelltext() tabindex=0>quellcode erstellen</b></span></td> 
</tr> 
</table>

  
</body>
</html>