下記のソースコードは、３つの文字が自動的に入れ替わって表示されるものです。、
これらの文字に、それぞれ違う色を設定したくて、番号を打って見たり、CSSで試みたのですが、組み立てがうまくいきません。どうすれば、それぞれの文字に違う色を設定できるでしょうか。
ご教示ください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 <HTML>
 <HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> 
 <meta http-equiv="Content-Script-Type" content="text/javascript">


 <TITLE>それぞれの文字に色をつける</TITLE> 

 <script type="text/javascript">
<!--
 var n = 0;
 function wordChange(){
var iv = 3000;
var words = [ '鬼', '蛇' ,'福'];
document.getElementById('output').innerHTML = words[n];
 n++;
 if (n > words.length - 1) n = 0;
 setTimeout(wordChange, iv);

 }
 window.onload = function() { wordChange(); }

//-->
 </script>

 </head>

 <BODY>

 <SCRIPT type="text/javascript">
 <!--
document.write("<p>");
document.write("<span id='output' style='font-size:26px; font-weight:bold;'></span>");
document.write("</p>");
//-->
</script>

　</BODY>
 </HTML>