Create a Midnight Rainbow with a little HTML and CSS

Startling Revelation

I went to school with Roy G. Biv; I'm proud to say that he was a friend of mine. Roy G. and his buddy Hue saturated me with colorful knowledge, and they were on the level.

So, I'm "paying it forward," kids, and showing you how, with a modicum of HTML and CSS, you can create a rainbow in the midnight sky (or so it seems, if you use your imagination).

Here is the HTML:

<h1>
<span class="r">R</span>
<span class="o">a</span>
<span class="y">i</span>
<span class="g">n</span>
<span class="b">b</span>
<span class="i">o</span>
<span class="v">w</span>
</h1>
<p>Look, Ma (and/or Pa)! I created a "Midnight Rainbow" with a little HTML and CSS!!!</p>

...and here is the CSS:

h1 {
    font-size: 500%;
    font-family: "Palatino Linotype", "Century Gothic", "Baskerville", "Consolas", "Candara", "Lucida Sans", serif;
}
body {
    background-color: black;
    font-family: "Lucida Sans", serif;
    color: white;
}
.r {
   color: hsl(0, 100%, 50%);
}
.o {
   color: hsl(30, 100%, 50%);
}
.y {
   color: hsl(60, 100%, 50%);
}
.g {
   color: hsl(120, 100%, 50%);
}
.b {
   color: hsl(240, 100%, 65%);
}
.i {
   color: hsl(280, 100%, 60%);
}
.v {
   color: hsl(300, 100%, 50%);
}

You can see an example of this here.

Or, if you sprained your clicking finger, it should look something like this:

TiNSTAaFT

(That stands for, "There is No Such Thing As a Free Tip"). If you like this, make a paper-machete statue of good ol' Roy G. Biv and paint it the colors of the rainbow (red, orange, yellow, green, blue, indigo (AKA blue-violet), and violet)