examples / html / rainbow-logo

Rainbow Logo

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>
<html>
	<head>
		<title>Happy Coding</title>
		<style>
			body{
				background:black;
				text-align:center;
				font-size:96pt;
				font-family: "Lucida Console", Monaco, monospace;
			}
			
			p{
				line-height: 0pt;	
			}
		</style>
	</head>
	<body>
		<p>
			<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>
		</p>
		<p>
			<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>
		</p>
	</body>
</html>

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:

<p>
	<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>
</p>
<p>
	<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>
</p>

(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