Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How do you create a box filled with color in HTML/CSS?
Overview
HTML and CSS are the technology by which we can create any shape and any frame. To create a box filled with color 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 can also use the HTML “svg” (Scalar Vector Graphics) property to draw a box and can also use the fill color property to fill the color to the box.
Syntax
The syntax to create a box and fill it with color using the svg is shown below. In which it contains four attributes as x, y, width, height and fill. So x-axis, it sets the horizontal position of the box with respect to the screen, y-axis sets the vertical position, height sets the height of the box, width sets the width of the box and fill attribute sets the color inside the box.
<svg> <rect x=“” y=“” width=“” height=“” fill=“” /> </svg>
Algorithm 1
Create a HTML file in a text editor with a HTML boilerplate in it.
Now add the svg tag to the body of the HTML.
<svg></svg>
Now use the <rect> semantic tag to create a box inside the svg tag.
<rect/>
Now set attributes in the <rect> tag such as x, y, width, height and fill.
<rect width="100" height="100" fill="green" />
Now open the browser and you will get a box filled with color.
Example 1
In this example we will be using the HTML svg tag to draw a box with the help of <rect> attribute.
<html> <head> <title> create box using svg </title> </head> <body> <h3> Created using svg </h3> <svg> <rect width="100" height="100" fill="green" /> </svg> </body> </html>
Algorithm 2
Create an index.html file on a text editor, and also add a HTML boilerplate to the file
Now add a div container to the body of HTML
<div></div>
Now add the internal style tag to the head tag of the HTML.
<style></style>
Now set the height, width and color of the box with CSS styling property.
<style>
div{
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
Open the browser and the box is created successfully with color filled in it.
Example 2
In this example we will create a box with a HTML div container, and will use the CSS styling property to fill the color in the box.
<html>
<head>
<title> create u=box using simple HTML and CSS</title>
<style>
div{
width: 10rem;
height: 10rem;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Conclusion
So as we have used the svg (Scalar vector graphics) to create a box, we can also create many different shapes with that. The best way to create a box with a color filled in it is a simple div container with some CSS styling properties because with the CSS you can easily customize your box in a separate style sheet. In small projects it does not seem difficult with svg, but if you have to build the same boxes several times then it’s a difficult task to write the same code that many times. It is not compulsory to use the ‘x’ and ‘y’ attribute with the “<rect>” if you do not want to change the position of the box. These types of boxes are used in the loading animations or can be used as the cards to display information
3K+ Views
