How to Change Background Colour in HTML

You can design unique layouts by changing the background colour of a web page or an element on the page. In the past, you could modify a page’s or element’s background colour using the background color attribute. However, in the most recent version of HTML, this attribute has been deprecated in favour of the far better CSS background color property. You can add and modify the HTML background colour using this feature.

Let’s walk through how to modify HTML’s background colour.

How To Change HTML Background Colour

Use the CSS background-color property to add a background colour to HTML. Put it into a style attribute and change the value to the desired colour name or code. Then include this style attribute in an HTML element, such as a heading, span tag, table, or div.

Now, let’s say you want to modify the background colour of a certain element while keeping the background colour of your entire website the same. The good news is that the steps for adding and changing an element’s background colour are remarkably similar.

There are three ways to change the HTML background colour:

Using the bgcolor attribute
Inline CSS
Internal Stylesheet

Using the bgcolor attribute

HTML offers a variety of styles and characteristics so that users can modify documents to suit their needs. The HTML code below demonstrates how to use the bgcolor attribute:

<html >
<head>
    <title>Document</title>
</head>
<body bgcolor="yellow" >
    <h1>Hi my name is Tim</h1>
</body> 
</html>

Using Inline CSS

Instead of adding this CSS to the HTML file’s body tag, you’ll use the body CSS selector. Locate it in the CSS code of your website.

The entire web page’s background colour will then be modified using the background-color property.

You can use inline CSS formatting, which allows you to define the background colour within the tag of the element you want to edit, or you can apply CSS formatting at the start of your HTML code in the head> section.

You must use selectors to determine which element to apply the formatting to if you insert the CSS formatting in the head> section.

With the help of the style attribute within the chosen tag, you can modify the background colour. This technique can be applied to practically any HTML element, including headings (h1>), paragraphs (p>), tables (table>), and sections of the page (div>), changing the background colour of the entire page.

Using Internal CSS

The steps listed below must be followed if you want to change the background color of a web page using an internal cascading CSS.

<html lang="en">
<head>
    <title>we are using internal CSS</title>
</head>
<body style="background-color:yellow">
    <h1>This is HTML</h1>
    <h2>We will employ the internal CSS feature</h2>
</body>
</html>

Changing Table Background Colour in HTML

In the past, changing a table’s background colour involved using the attribute bgcolor. A table row or a table cell’s colour could also be altered using it. The bgcolor attribute is no longer recommended in favour of style sheets. Therefore using it to change the table background colour HTML is not the best option.

Adding the style attribute background-color to the table, cell tag, or row provides a better approach to changing the background colour.

For instance, you can configure the styles in an external style sheet or in a style sheet that is placed at the HEAD of your HTML document. For tables, rows, and cells, modifications like those in the HEAD or from an external style sheet might show up like these:

table { background-colour: #ff000; }

tr { background-colour: green; }

td { background-color: #000; }

You can subsequently change your colour selection, which is a big benefit of using a stylesheet to control background colours. Instead of changing each and every cell in the HTML document one at a time, you can alter the colour preference in the CSS once, and it will be instantly applied to all instances of the class=”ColColor” syntax.

Although using CSS instead of merely changing an HTML element involves more administrative work than simply changing an attribute, you’ll find that using CSS cuts down on errors, expedites development, and enhances the portability of your content.

Background Color Hex Codes

The most common method for colouring HTML page elements is hex codes. A hash symbol (#) is placed in front of a hexadecimal (base 16) number to create a hex code.

Six letters make up each hex code, and each pair of characters defines the strength of the three primary colours—red, green, and blue—from 00 (lowest intensity) to FF (maximum intensity) (highest intensity).

White, for instance, has the maximum intensity of the three colours. Hence its hexadecimal value is #FFFFFF. The opposite is true for black, which has the lowest colour saturation (#000000). We increase the intensity of green and decrease the intensity of red and blue to create the colour green, giving us the hex code #00FF00.

Wrapping Up

There are many ways to change the background colour in HTML. We have discussed them briefly in this blog. Get started, and try out the various methods listed here.

Where can I learn HTML?

There are numerous ways to learn HTML. Code Institute teaches it as part of its Full Stack Software Development diploma. We also teach the basics of HTML for free through our 5 Day Coding Challenge. After just one hour a day over five days, you will have built your first ever web page.

Take your first step in learning some of these skills. Register for our 5 Day Coding Challenge through the form below.

How to Change HTML Background Colour

Author: Daragh Ó Tuama