How do you create a box filled with color in HTML/CSS?

Overview

HTML and CSS are technologies with which we can create any shape and any frame. To create a box filled with color can be achieved using HTML as we can create a simple box frame with the help of HTML and can fill it with color using CSS properties. We can also use the HTML "svg" (scalar vector graphics) attribute to draw a box and the fill color attribute to fill the box with color.

grammar

The syntax for using svg to create a box and fill it with color is as follows. It contains four attributes: x, y, width, height and padding. So, the x-axis sets the horizontal position of the box relative to the screen, the y-axis sets the vertical position, the height sets the height of the box, the width sets the width of the box, and the fill property sets the color of the box within the box.

<svg>
   <rect x=“” y=“” width=“” height=“” fill=“” />
</svg>

Algorithm 1

• Create an HTML file in a text editor that contains HTML boilerplate.

• Now add the svg tag to the HTML body.

<svg></svg>

• Now creates a box inside the svg tag using semantic markup.

<rect/>

• Now set the properties in the tag such as x, y, width, height and padding.

<rect width="100" height="100" fill="green" />

• Now open your browser and you will see a box filled with color.

Example 1

In this example, we will use HTML svg tag to draw a box with the help of attribute.

    


    
 Created using svg 
    

Algorithm 2

• Create an index.html file on a text editor and add HTML boilerplate to the file

• Now add the div container to the HTML body

<div></div>

• Now add the inner style tag to the HTML head tag.

<style></style>

• Now use CSS style properties to set the height, width and color of the box.

<style>
   div{
      width: 10rem;
      height: 10rem;
      background-color: green;
   }	
</style>

• Open the browser, the box is created successfully and filled with color.

Example 2

In this example, we will create a box with an HTML div container and will use CSS style properties to fill the box with color.

    
    


    <div></div>

in conclusion

Just like we use svg (scalar vector graphics) to create a box, we can also use it to create many different shapes. The best way to create a color-filled box is to use a simple div container with some CSS style properties, because with CSS you can easily customize the box in a separate stylesheet. In small projects, working with svg may not seem difficult, but if you have to build the same box multiple times, writing the same code multiple times is a daunting task. If you don't want to change the position of the box, you don't have to use the "x" and "y" attributes with "". These types of boxes are used for loading animations or can be used as cards to display information

The above is the detailed content of How do you create a box filled with color in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!