Rainbow Logo
Rainbow Logo
November 26, 2016
example html cssThis 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>
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
- 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
Comments
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!