HTML Background Color
Introduction
In HTML, the color visible behind the webpage's content is referred to as the background color. CSS can be applied to alter it, and there are several techniques for changing the background color. Here, the string of color values is given, which can be a name, RGB, HSL, or hexadecimal code, to define the background color property of a CSS rule. To achieve the desired HTML element, apply this rule.
Background Color using Hex Color Codes
It is very easy to color the background of a webpage. The first and most common method is to use the background-color property with a Hex color code. In this instance, we apply a Hex color straight to the HTML element using the style tag.
Nearly any HTML element can be styled using this same technique; however, note that the behavior of the components may vary depending on whether they are block-level or inline. To find a color's Hex code, use our color picker or color chart.
HTML
<body style="background-color:#FF0000;">
</body>
Background Color using HTML Color Names
HTML element coloring is possible with various methods. The most common of them are HEX color codes. Furthermore, you can also utilize an HTML color name by substituting the HEX code with one of the 140 color names available, and you are good to go.
HTML
<body style="background-color:red;">
</body>
Background Color using HSL Color Values
Many contemporary browsers now support HSL values, which are less common but just as effective. See Wikipedia for an overview of the reasons for HSL's awesomeness, which stands for Hue, Saturation, and Lightness. Use the same syntax as for the RGB values above, using the hsl() prefix if you only want to utilize them as an HTML background color.
Alpha channel control is also available for HSL, just like it is for their RGB counterparts. Create a fourth value between 0 and 1 and insert it using the hsla() prefix.
HTML
<body style="background-color:hsl(0,100%,50%);">
</body>
HTML
<body style="background-color:hsla(0,100%,50%,0.5);">
</body>
Background Color using RGB Color Values
HTML elements can also have a background color added by using RGB values. The HEX code or color name should be replaced with an appropriately structured RGB value using the same style element as previously (be sure to contain it in parentheses and prefix it with a lowercase 'rgb'). The RGB value implies the brightness of red, green, and blue colors.
HTML
<body style="background-color:rgb(255,0,0);">
</body>
You also have the option to specify the opacity level when utilizing RGB values in HTML. You can add a fourth value between 0 and 1, with 0 representing entire transparency and 1 representing complete opaqueness, using the prefix rgba(). Decimal values should be used for levels in between. The 'a' in this prefix denotes alpha, the channel that regulates transparency.
HTML
<body style="background-color:rgba(255,0,0,0.5);">
</body>
How to Set the Background Color in HTML?
We can build unique layouts for websites by changing the background color of a page or an element on the page.
Use the style attribute in conjunction with the CSS property background color inside the HTML document's body tag to set the background color in HTML.
Since HTML5 does not support the tag's bgcolor attribute, the background color is added using CSS style. The bgcolor property was deprecated in HTML5.
Using the other property to override the property, we achieve that change of background color.
Syntax
<body style="background-color:aquamarine;">
Example
Below is a program that gets the background color for an HTML page.
<html>
<body style="background-color:aquamarine;">
<h1>HTML Articles</h1>
</body>
</html>
By replacing the property with a different color, we can alter the background's color.
Example
Below is a program that gets the background color for an HTML page.
<html>
<body style="background-color:khaki;">
<h1>HTML Articles</h1>
</body>
</html>
We can fix the background color based on the RGB value. The RGB value shows the power of red, green, and blue colors. Every intensity value ranges from 00 to FF in the hexadecimal number system or from 0 to 255 on the scale.
Example
The program that follows is an example of how to set the background color using the RGB values.
<html>
<head>
<style>
body {
background-color: rgb(20,30, 1);
}
</style>
<h1>HTML Articles</h1>
</head>
<body>
</body>
</html>
How to Change the Background Color in HTML?
There are some methods to change the background color of a document:
- Changing Background Color using the bgcolor attribute
- Changing Background Color using an Inline CSS
- Changing Background Color using Internal CSS
- Changing Background Color using External CSS
Changing Background Color using the bgcolor Attribute
With this method, background color changes can be made quickly because the bgcolor attribute is used directly in HTML components. Although HTML5 deprecates the bgcolor attribute, it is still maintained for compatibility. It adjusts an element's backdrop color.
Changing Background Color using bgcolor attribute Syntax:
bgcolor="color_name"
The bgcolor attribute is used to set the body's background color to light green in this instance.
Changing Background Color using bgcolor attribute Example:
<html>
<head>
<title>Background Change using bgcolor attribute Example</title>
</head>
<body bgcolor="pink">
<h1>
Hello reader
Welcome
</h1>
</body>
</html>
Changing Background Color using bgcolor attribute Example Explanation:
- The structure of the webpage is specified in the HTML file.
- Using the bgcolor attribute found in the <body> tag, set it to pink.
Changing Background Color using Inline CSS
Here, we are altering an HTML element's background color using inline CSS. Applying the style attribute directly within the HTML tag and giving the background-color property is how this is accomplished.
Changing Background Color using Inline CSS Syntax:
< tag style="background-color: color name;">..</tag>
Changing Background Color using Inline CSS Example:
Inline CSS is being used here. Inline CSS uses the style property contained in the HTML tag to apply styles to specific HTML elements directly.
<html>
<head>
<title>Background Change using Inline CSS Example</title>
</head>
<body style="background-color: yellow;">
<h1>Welcome to our website</h1>
<h2>We are using the Inline CSS</h2>
</body>
</html>
Changing Background Color using Inline CSS Example Explanation:
- With the <html>, <head>, <title>, <body>, <h1>, and <h2> components, we are generating a basic HTML document in this instance.
- The <body> tag has the background color "yellow" added to it directly using the style attribute.
Changing Background Color using Internal CSS
The <style> tag in the <head> area of an HTML document is where we apply styling rules, such as changing the background color to elements. In this case, we are using internal CSS.
Changing Background Color using Internal CSS Syntax:
<style>
Body {
background-color: green-yellow;
}
</style>
Changing Background Color using Internal CSS Example:
Here, internal CSS is used in the section to set the background color to pink.
<html>
<head>
<title>Internal CSS</title>
<style>
Body {
background-color: pink;
}
</style>
</head>
<body>
<h1>Welcome to our website</h1>
<h2>We are using the Internal CSS</h2>
</body>
</html>
Changing Background Color using Internal CSS Explanation:
- With the <html>, <head>, <title>, <style>, and <body> elements, we are generating a basic HTML document here.
- Style is applied inside the <style> tag with the <body> element as the target for the background color.
Changing Background Color using External CSS
Here, External CSS is being used, where style guidelines are specified in a different CSS file and connected to HTML content through the element. All stylistic information, including background color options, is contained in this file.
Changing Background Color using External CSS Syntax:
body{
background-color: yellow;
};
Changing Background Color using External CSS Example:
In this example, an HTML document is linked to a second CSS file containing stylistic rules using the '<link>' tag, which is created using External CSS. The background color to be used with our HTML element is contained in this file.
CSS:
body{
background-color: yellow;
}
HTML:
<html lang="en">
<head>
<title>inline style attribute</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to our website</h1>
<h2>We are using the External CSS</h2>
</body>
</html>
Changing Background Color using External CSS Example Explanation:
- Here, the <html>, <head>, <title>, <link>, and <body> tags form the structure of the document.
- To add more styling, use the External CSS Link to connect the HTML file to the "style.css" external stylesheet.
- We aim to get our desired background color of body elements by using this external style sheet.
Conclusion
In conclusion, HTML offers various mechanisms for manipulating background colors, such as Hex codes, HTML colors, HSL, and RGB values. On the other hand, deprecated attributes like 'bgcolor' are still supported for compatibility reasons, but the modern approach involves CSS styles.
Inline, internal, and external CSS styles vary to style web page elements, and because of this, the process is easier and more maintainable with changing background colors. Through the utilization of these methods, developers can make the website more attractive and easy to use, and it must meet the current web standards and technologies.