Añadir Estilo a javascript en HTML

Bueenaas, espero que todos estén muy bien...

Pues estaba haciendo un documento en HTML en el que usaba javascript para hacer un efecto con el texto: que cada letra se fuera escribiendo poco a poco. El código es éste:

Código:

<html>
<script type="text/javascript">
function showIt(){
setTimeout('document.write("<LETTER>");', 100)
setTimeout('document.write("<br />");', 100)
setTimeout('document.write("H");', 100)
setTimeout('document.write("e");', 300)
setTimeout('document.write("l");', 400)
setTimeout('document.write("l");', 500)
setTimeout('document.write("o");', 600)
setTimeout('document.write(",");', 700)
setTimeout('document.write(" ");', 800)
setTimeout('document.write("m");', 900)
setTimeout('document.write("y");', 1000)
setTimeout('document.write(" ");', 1200)
setTimeout('document.write("n");', 1300)
setTimeout('document.write("a");', 1400)
setTimeout('document.write("m");', 1500)
setTimeout('document.write("e");', 1600)
setTimeout('document.write(" ");', 1700)
setTimeout('document.write("i");', 1800)
setTimeout('document.write("s");', 1900)
setTimeout('document.write(" ");', 2000)
setTimeout('document.write("-");', 2100)
setTimeout('document.write("-");', 2200)
setTimeout('document.write("-");', 2300)
setTimeout('document.write("-");', 2400)
setTimeout('document.write(".");', 2500)
setTimeout('document.write("<br />");', 2600)
setTimeout('document.write("T");', 2700)
setTimeout('document.write("h");', 2800)
setTimeout('document.write("i");', 2900)
setTimeout('document.write("s");', 3000)
setTimeout('document.write(" ");', 3100)
setTimeout('document.write("i");', 3200)
setTimeout('document.write("s");', 3300)
setTimeout('document.write(" ");', 3400)
setTimeout('document.write("m");', 3500)
setTimeout('document.write("y");', 3600)
setTimeout('document.write(" ");', 3700)
setTimeout('document.write("f");', 3800)
setTimeout('document.write("i");', 3900)
setTimeout('document.write("r");', 4000)
setTimeout('document.write("s");', 4100)
setTimeout('document.write("t");', 4200)
setTimeout('document.write(" ");', 4300)
setTimeout('document.write("J");', 4400)
setTimeout('document.write("a");', 4500)
setTimeout('document.write("v");', 4600)
setTimeout('document.write("a");', 4700)
setTimeout('document.write("S");', 4800)
setTimeout('document.write("c");', 4900)
setTimeout('document.write("r");', 5000)
setTimeout('document.write("i");', 5100)
setTimeout('document.write("p");', 5200)
setTimeout('document.write("t");', 5300)
setTimeout('document.write(".");', 5400)
setTimeout('document.write("<br />");', 5500)
setTimeout('document.write(":");', 5600)
setTimeout('document.write(")");', 5700)
}
</script>
<title>
Hello.
</title>
	<body 
	style="background-color:black; font-family:'Lucida Console'; font-size:16px; color:cyan;">
	<br>
	<br>
	<br>
	<br>
	<br>
		<center>
		Press "Start" to Play!
	<br>
	<br>
		<input type="button" value="Start" onClick="showIt()" style="height: 25px; width: 100px; font-family:'Lucida Console'; font-size:14px;"></input>
		</center>
	</body>
</html>

Entonces lo que hace es, presionas el botón y comienza el script, pero todo el "style" que tenía, desaparece.
Mi duda es entonces, cómo hacer que el mismo "style" aplique también para cuando se está ejecutando el script, osea que este el fondo negro con las letras cyan y que se vaya escribiendo el texto poco a poco.

Pues es eso, muchas gracias

PD: Es la primera vez que creo un tema así que les pido mis más sinceras disculpas si puse el tema en un foro equivocado o si lo hice mal, gracias por su comprensión.