How to add background color in HTML
Let's Add Some Color to Your Web Pages
In the vast world of web development, it's the small details that often make the biggest impact. One such detail is the use of background color. Background color can set the mood, highlight important elements, and even make your content easier to read. In this blog, we're going to explore how to add background color in HTML.
Before we dive in, let's quickly define HTML. HTML, or HyperText Markup Language, is the standard language used to create web pages. It's not a programming language, per se, but a markup language that structures content on the web.
Setting the Background Color
HTML provides several ways to add background color, and we will discuss two of them here: using the 'bgcolor' attribute and the CSS 'background-color' property.
Using the bgcolor Attribute
The 'bgcolor' attribute was traditionally used to specify the background color of an HTML element. Here's how you would use the 'bgcolor' attribute:
<body bgcolor="lightblue">
In the above example, the entire background of the web page will have a light blue color. Simply replace 'lightblue' with the color of your choice.
However, it's important to know that 'bgcolor' is now obsolete in HTML5 and is not recommended for modern web development practices.
Using CSS background-color Property
Today, we use CSS (Cascading Style Sheets) to style HTML elements, including setting background colors. CSS can be added to HTML elements in three ways: Inline, Internal, and External. For simplicity, we'll focus on Inline and Internal methods in this article.
Inline CSS
With inline CSS, the style is applied directly to the HTML element. Here's an example:
<body style="background-color:lightblue;">
In this example, just like the previous one, the entire background of the webpage will be light blue. However, this time we're using CSS to accomplish this.
Internal CSS
Internal CSS involves adding a <style> element in the <head> section of the HTML document.
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
With this method, the background color is set for the entire body of the webpage.
Color Values in HTML
When setting colors in HTML, you can use color names, Hex color codes, or RGB values.
Color Names
HTML supports 140 standard color names. These are simple to use and understand. Examples include 'red', 'blue', 'green', 'yellow', 'pink', 'purple', and so on.
<body style="background-color:purple;">
Hex Color Codes
If you want more color choices, Hex color codes are the way to go. A Hex color code is a six-digit code that represents a color. It's written as #RRGGBB, where RR (red), GG (green), and BB (blue) are hexadecimal values.
<body style="background-color:#RRGGBB;">
For example, to set the background color to orange, you would use:
<body style="background-color:#FFA500;">
RGB Values
RGB values are another method to specify color. RGB stands for Red, Green, and Blue. These are the three primary colors that can be combined in various ways to produce a broad array of colors.
<body style="background-color:rgb(red, green, blue);">
For example, to set the background color to orange, you would use:
<body style="background-color:rgb(255, 165, 0);">
To wrap it up, adding background color in HTML is a straightforward process. It's an easy way to add personality to your web pages and improve user experience. Just remember, the 'bgcolor' attribute is outdated and should be avoided. Instead, use CSS to style your HTML elements, including setting background colors, for more flexibility and control. And when it comes to choosing colors, you have a palette of 140 color names, countless Hex color codes, and endless RGB values to choose from. Enjoy coloring your web world!