This example uses HTML and CSS to create a border of colored divs.
<!DOCTYPE html>
<html>
<head>
<title>Rainbow Divs</title>
<style>
div {
padding: 25px;
font-size: 72px;
text-align: center;
border: thin solid black;
color: white;
}
.red {
background-color: red;
}
.orange {
background-color: orange;
}
.yellow {
background-color: yellow;
}
.green {
background-color: #00ff00;
}
.blue {
background-color: blue;
}
.violet {
background-color: purple;
}
</style>
</head>
<body>
<div class="red">
<div class="orange">
<div class="yellow">
<div class="green">
<div class="blue">
<div class="violet">Happy Coding!</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
See the Pen by Happy Coding (@KevinWorkman) on CodePen.
Use CSS to create colored divs.
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!