In your pursuit to master many, if not all, the programming languages within the coding industry, you may have already realized how incredibly easy it is to customize each of those scripts to your liking. Coders, developers, and programmers leverage the fact that they can change every single detail of their program so that it drives the result that they desire. As you may know already, first impressions matter a lot, especially in a time when the average human attention span is so low and fleeting. Every visual stimulus can make a significant impact and in the world of coding, that is where the programmer comes into play. Thus, in a programming language like HTML, changing the HTML background color can manipulate how the viewer sees your site or program.
In a coding script as easy and basic as HTML, every component is just as simple to learn. The beauty of programming languages is that even the smallest components that merely present themselves as codes to the developer, create experiences for the viewers. In this article, we will see how we can create such experiential visual stimuli by learning how to change background color in HTML by using different methods. Let us get right to it.
Table of Contents
Change background color HTML – Method #1
The first method is the easiest of all the methods in this article. It is a quick and easy way to change background color HTML without any hassle of linking the code to any other styled script. This method makes use of the ‘bgcolor’ attribute. Let us see how this method works with the help of a couple of examples.
Example #1:
<html>
<head> <title>
Change background color HTML
</title></head>
<body bgcolor= yellow>
<h1> The background is yellow </h1>
</body>
</html>
OUTPUT:
Similarly, we can try this method for other colors as well.
Example #2
<html>
<head> <title>
Change background color HTML
</title></head>
<body bgcolor= cyan>
<h1> The background is cyan </h1>
</body>
</html>
OUTPUT:
The only possible downfall to this method of changing the background color in HTML is that, over time, it has been depreciated by the W3C (World Wide Web Consortium) For this reason, let us look at the second method for acquiring the same result by linking CSS to our HTML code. Let us look at some examples to see how this can be done:
Change background color HTML – Method #2
Example #1:
<html>
<head> <title>
Change background color HTML
</title></head>
<body style=“background=color:blue”>
<h1> This CSS formatted background is blue </h1>
</body>
</html>
OUTPUT:
Here is a tip. The ‘style’ attribute linked to CSS can also be used with the header <h> tags, as well as other editing tags. For instance, if you want to set one color as the background color in HTML but change the background color for a particular heading, you can follow the below example.
Example #2:
<html>
<head> <title>
Change background color HTML
</title></head>
<body style=“background-color:orange”>
<h1> This CSS formatted background is orange </h1>
<h2 style=“background-color:red”> But the background for this text is red </h2>
</body>
</html>
OUTPUT:
With these two easy methods, you now know how to change background color in HTML. However, changing background color in HTML does not have to provide a static and solid color all the time. You can create interesting visuals by changing the CSS formatting of your HTML program. Let us do a quick exercise. Follow along with the below exercise or you can even copy-paste it to your coding platform to see the enthralling visual experience it results in.
Dynamic Background Color Exercise:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>
Change background color HTML
</title>
<style>
body
{
margin: 0;
padding: 0;
animation: bgcolor infinite 20s;
}
h1
{
margin: 0;
padding: 0;
font-family: arial;
font-size: 5em;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
@keyframes bgcolor{
0%
{
background: #e74c3c;
}
20%
{
background: #2980b9;
}
40%
{
background: #f1c40f;
}
60%
{
background: #8e44ad;
}
80%
{
background: #34495e;
}
100%
{
background: #e74c3c;
}
}
</style>
</head>
<body>
<h1> Dynamic Background Color </h1>
</body>
</html>
Did you try it out? Let us know if you liked the effect that your HTML code brought about. Of course, this is just a preset. Go ahead and feel free to make your own changes to this format so that you can customize the background color and add your own twist to it.
Now that we know all about changing and animating background color HTML with multiple methods, it is now time to look at another background component. While creating tables in HTML, we often tend to leave them with no added color which results in them looking dull, drab, and boring. Adding a splash of color to your table backgrounds will elevate the table visuals, make it look more interesting and all the more appealing to the viewer. Let us learn how to change the HTML table background color with the following example:
How to change HTML table background color:
<html>
<head><title> HTML table background color
</title>
<style>
Body{
Background:gray;
}
Table{
Width: 800px;
Margin: auto;
Tabke-layour: fixed;
Text-align: center;
Margin-top:50px;
Font-family: Arial;
Color: #fff;
}
Table, th, td{
Border: 1px dotted white;
Border-collapse: collapse;
Padding: 20px;
Font-size: 20px;
}
Th{
Background: purple;
Padding: 30px;
Text-transform: uppercase;
}
Td{
Background: violet;
}
</style>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Nationality </th>
<th> Contact </th>
<th> Post </th>
<th> Company </th>
</tr>
<tr>
<td> Alex </td>
<td> Canadian </td>
<td> 4572372 </td>
<td> Manager </td>
<td> Apple </td>
</tr>
<tr>
<td> Amanda </td>
<td> New Zealander </td>
<td> 4572645 </td>
<td> Associate </td>
<td> Google </td>
</tr>
<tr>
<td> Rohan </td>
<td> Sri Lankan </td>
<td> 2732645 </td>
<td> Accountant </td>
<td> Deloitte </td>
</tr>
<tr>
<td> Neil </td>
<td> Nigerian </td>
<td> 45645379 </td>
<td> Executive </td>
<td> Forbes </td>
</tr>
</table>
</body>
</html>
OUTPUT:
Conclusion:
And with that, you have now mastered how to utilize the different resources at hand to change the background color in HTML with multiple methods. In addition to this, you now also know how to customize those mundane tables to make them attractive, eye-catching, and presentable. As we mentioned earlier, the first impression is key. So, go ahead and use these tips and tricks which are at your disposal, to make the most out of your HTML program. You can add your own twists to these methods to bring about different results that suit your preferences. Use this article and its examples as a guide and you will be able to master the customization of background color in HTML in no time.
Of course, these examples represent only the tip of the iceberg, with respect to background customization in HTML. You can even change the background to a static image or a gif file, layer, or grid those images for another interesting visual experience. The key to learning any programming language quickly is creativity. Get creative with your ideas and test the limits of HTML or any programming language, be it the background color, or code automation. The best time to start is now.