Rainbow Logo

Rainbow Logo

November 26, 2016

example html css

This program uses the <span> class to style each individual letter in the text Happy Coding!. It then uses a mix of internal styles inside the <head> section and inline styles on each <span> tag to create a rainbow logo on a black background.

<!DOCTYPE html>
		<title>Happy Coding</title>
				font-family: "Lucida Console", Monaco, monospace;

				line-height: 0pt;
			<span style="color:orange">H</span><span style="color:yellow">a</span><span style="color:green">p</span><span style="color:blue">p</span><span style="color:indigo">y</span>
			<span style="color:red">C</span><span style="color:orange">o</span><span style="color:yellow">d</span><span style="color:green">i</span><span style="color:blue">n</span><span style="color:indigo">g</span><span style="color:violet">!</span>

rainbow logo

Code Editor

See the Pen by Happy Coding (@KevinWorkman) on CodePen.

If this seems confusing, try to split the <span> tags up to better see what they’re doing:

	<span style="color:orange">H</span>
	<span style="color:yellow">a</span>
	<span style="color:green">p</span>
	<span style="color:blue">p</span>
	<span style="color:indigo">y</span>
	<span style="color:red">C</span>
	<span style="color:orange">o</span>
	<span style="color:yellow">d</span>
	<span style="color:green">i</span>
	<span style="color:blue">n</span>
	<span style="color:indigo">g</span>
	<span style="color:violet">!</span>

(Note that actually formatting this way will add spaces between our letters. This is just to make it easier to see what’s going on.)

The <span> tag is just a block of text that doesn’t get its own line like the <p> tag, so it can be used to style a part of a paragraph, or even a single letter like above. Then we just use inline styles to give each letter a different color. The rest of the styles (the black background, font size, and centered text) come from the internal styles in the <head> section.

Tweak Ideas

  • Change the colors so they fade from one color to another instead of a rainbow.
  • Use this type of logic to create a logo for your own personal webpage.

CSS Examples


Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!