Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Box Filled with Color in HTML and CSS
To create a box filled with color in HTML/CSS, it can be achieved with HTML as we can create a simple frame of the box with the help of HTML and to fill the color we can use the CSS property. We will be discussing two different approaches to create a box filled with color.
In this article, we are having a div or we can have any block element and our task is to create a box filled with color in HTML/CSS.
Approaches to create a box filled with color
Here is a list of approaches to create a box filled with color in HTML/CSS which we will be discussing in this article with stepwise explaination and complete example codes.
Create Color Filled Box using div Tag
To create a box filled with color in HTML/CSS, we will be using HTML div tag.
- We have used div tag to create structure of box.
- Then we have used CSS height and width property to set the dimension of rectangle.
- We have used CSS background-color property to set the color of the box.
Example
Here is a complete example code implementing above mentioned steps to create a box filled with color in HTML/CSS using HTML div tag.
<html>
<head>
<title>
Creating a box filled with color in HTML/CSS
</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #04af2f;
}
</style>
</head>
<body>
<h3>
To create a box filled with color in HTML/CSS
</h3>
<p>
In this example we have used HTML <strong>div</strong>
tag to create a rectangular box filled with green color.
</p>
<div class="box"></div>
</body>
</html>
Note: We can use any block element instead of div with CSS height and width property to create a box.
Create Color Filled Box using SVG
In this approach to create a box filled with color in HTML/CSS, we will be using SVG which is used to draw two dimensional vector images.
- We have usd SVG rect tag to draw a rectangle.
- After using rect tag to create a rectangle, we have used attributes of rect tag to set the dimension of rectangle using width and height and used fill attribute to add color to rectangle.
Example
Here is a complete example code implementing above mentioned steps to create a box filled with color in HTML/CSS using SVG.
<html>
<head>
<title>
Creating a box filled with color in HTML/CSS
</title>
</head>
<body>
<h3>
To create a box filled with color in HTML/CSS
</h3>
<p>
In this example we have used <strong>SVG</strong>
to create a rectangular box filled with green color.
</p>
<svg>
<rect width="100" height="100" fill="#04af2f"/>
</svg>
</body>
</html>
Conclusion
In this article, we discussed two different approaches to create a box filled with color in HTML/CSS which are by using HTML div tag and by using SVG. Generally, we use div tag to create a box as it is simple and easy to implement.
8K+ Views
