September 2, 2022

How to Change Background Color of Div in HTML

In this tutorial, you will learn how to change background color of Div in HTML. In HTML, div element is used to define parts of a document. The div tag is known as a division tag. The div tag is used to make divisions of content in the webpage like images, text, header, navigation bar, footer, etc.

Div tag is a block-level tag. The div tag is used as a container/wrapper in HTML. With the help of div tag, we can create a particular section for particular data on the web pages. As a result, we can display contents of our website in an organized manner.

To change the background color of a div in HTML, we will use the style attribute and background-color property. Please have a look over the code example and the steps given below.

HTML

We have one element in the HTML file (div).
Within the div element, we have a style attribute containing various CSS properties.
The background-color property has the value of green, which will eventually change the background color of the div element to green color.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Div</title>
</head>
<body>
    <div style="height: 200px; width: 200px; background-color: green; margin: 0 auto;">
    </div>
    
</body>
</html>

You May Also Like: