How to Change HTML Background Color


In this tutorial we will teach you how to set background color in HTML. But before moving on to set the color, we must see how to define a color in HTML. HTML color codes are defined as 6 digit hexadecimal values, i.e #A0082C, and create a spectrum of 16 million colors. These individual 16 million values can be found on the internet very easily.

Step # 1 – Learning the old way

Basically to set the background color in HTML there is a very simple way that most of HTML designers are normally familiar with and may still prefer. It is the attribute bgcolor in the <body> element. The bgcolor attribute takes a color code value and changes the background of the HTML page to that color.

Although this method is very easy and simple, setting background colors in HTML through the bgcolor attribute has been deprecated in HTML5 and is discouraged. But even so, all browsers still support this attribute. With rise of CSS, all styling is done through style sheets, including background colors.

Using the deprecated bgcolor attribute

Step # 2 – Style attribute

CSS introduces a style attribute in all elements of HTML, including the body element. And like all other styling, background colors can also be declared in this attribute. The syntax follows that of external CSS files or internal CSS defined in the <head> element.

For setting background color in HTML, the background color tag in the style attribute takes the same hexadecimal color code as value as bgcolor did.

Using style attribute with background color tag

The result of this method is a change in the background of the HTML page exactly like bgcolor resulted, but this unifies all types of styling to one attribute instead of multiple fragmented attributes. With more research and advancement in web technologies, fragmentation can turn out to be a big problem if not handled early, similar to this change in coloring background.