Background colors can enhance the overall interactivity of a webpage by making it visually appealing. The Background Color can be referred to as implementing the color to the background of any webpage or application. In this article, we will look at how we can add the correct HTML for adding a background color.
Table of Contents:
Correct HTML for adding background color
The Background color defines the color applied to the background of the website or application with the help of the CSS background-color property. This CSS property sets the color of the element.
Syntax:
<element style="background-color: colorname;"> Content </element>
To include the background color to any HTML element, which can be categorized in the following manners:
- Using bgcolor attribute
- Using Inline CSS
- Using Internal CSS
- Using External CSS
Using bgcolor attribute
For the HTML element, like the <body>, <table>, <td>, and <tr>, the bgcolor attribute can be used to set the background color. This attribute can take color names, hex, or RGB as its value. This attribute is deprecated in HTML 5.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using bgcolor Attribute</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body bgcolor="lightblue">
<h1>Intellipaat offered Courses</h1>
<p>The following are the courses offered by Intellipaat:</p>
<table border="1" bgcolor="#A79BE4">
<tr>
<th>Course</th>
<th>Price</th>
</tr>
<tr>
<td>Data Science</td>
<td>$457</td>
</tr>
<tr>
<td>Fullstack Development</td>
<td>$167</td>
</tr>
<tr>
<td>Cloud Computing</td>
<td>$649</td>
</tr>
</table>
</body>
</html>
Output:
Using Inline CSS:
To use the background-color Property as an inline styling, the style attribute will be used with the below syntax:
<element style="background-color: lightblue;">Content</element>
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using bgcolor Attribute</title>
</head>
<body>
<h1>Background Color using Inline Styling</h1>
<div style="background-color: rgb(83, 50, 137);">
This is Inline Styling to include the background-color.
</div>
</body>
</html>
Output:
Here, the background-color property only applies to the div element, and not to the entire background.
Using Internal CSS
This type of styling can be used with implementing the <style> tag inside the <head> tag.
Example:
The below example illustrates the internal styling of Background-color Property.
<!DOCTYPE html>
<html>
<head>
<title>Using bgcolor Attribute</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(219, 150, 10);
color: white
}
</style>
</head>
<body>
<h1>Background Color using Internal Styling</h1>
<div>
This is Internal to include the background-color.
</div>
</body>
</html>
Output:
Using External CSS
This type of styling uses the external CSS file which is linked to the HTML file with the help of <link> tag inside the <head> tag. The below syntax is used to include the external CSS file.
Syntax:
<link rel="stylesheet" href="styles.css">
Example:
<!DOCTYPE html>
<html>
<head>
<title>Using External Stylesheet</title>
<link rel="stylesheet" href="styles.css">
<style>
</style>
</head>
<body>
<h1>Background Color using External Styling</h1>
<div>
This is an External Styling to include the background color.
</div>
</body>
</html>
Styles.css:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(82, 131, 90);
color: white
}
Output:
Conclusion:
The background-color property in CSS is a powerful tool that enhances the visual design of web pages. It enables developers to apply colors to the backgrounds of elements, which improves readability, creates visual focus, and maintains a cohesive design theme. With background color, you can set solid colors, use transparent backgrounds, or even mix them with background images for creative effects. While older methods like the bgcolor attribute are outdated, the modern CSS background-color property offers flexibility, scalability, and compatibility with responsive designs. Whether you use named colors, hexadecimal values, RGB, HSL, or CSS variables, this property is crucial for effectively styling web pages.
FAQ’s
What is the shorthand property used for the CSS background-color property?
The background shorthand property can be used to set single or multiple background properties, including the background-color property.
Is it possible to inherit the background-color property?
No, by default, the background-color property is not inherited, however, it can be set to inherit by applying it to child elements using the CSS Selectors.
How to implement the CSS variables with the background-color property?
CSS variables can be utilized to define the reusable colors for the CSS background-color property.
Is it possible to combine CSS background-color property with other background properties?
Yes, you can use the background shorthand property to combine the background-color property with other background properties, such as the background-image property.