CSS can be intimidating even for seasoned developers—there are so many options! But in this article, we’ll discuss how to change the background color in your HTML document without creating a separate cascading style sheet.
When using HTML5, you can add a background color by using the style attribute, and property `background-color`. You can implement this attribute on the element of your choice; however, to set the background color of the entire page, the style attribute should be in the body tag. Your HTML might look something like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-color:orange;">
<h1>This is our header.</h1>
<p>This is our text.</p>
</body>
</html>
This code gives us an HTML page with an orange background.
Implementing Additional Web Color Systems
When you are selecting your color in HTML, the style attribute accepts hex codes, HTML color names, RGB(A) color values, and HSL color values. In the case of RGB colors and HSL colors, the color systems must be included in the background-color declaration.
Examples of how to format each color system are listed below:
Hex Code
<body style="background-color:#fbbd0e;"> </body>
HTML Color Name
<body style="background-color:orange;"> </body>
RGB Color Values
<body style="background-color:rgb(251,189,14);"> </body>
RGBA Color Values
<body style="background-color:rgba(251,189,14,0.5);"> </body>
HSL Color Values
<body style="background-color:hsl(44, 96%, 51%);"> </body>
HSLA Color Values
<body style="background-color:hsla(44, 96%, 51%, 0.5);"> </body>
One thing to note: If using this method to set the background color, but later write an external CSS file, be sure to remove the style attribute and background-color property from your HTML to prevent one style from overwriting the other.
Conclusion
In this article, we discussed how to change the background color with HTML. If you’re new to HTML, check out our guide here: Learn HTML: A Guide to Learning Hypertext Markup Language, or read our article How Long Does It Take to Learn HTML?
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
