How to Change the Background Color in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

Introduction

Changing the background color of an element is one of the most common tasks in CSS. The background-color property allows you to easily set the background color of any HTML element.

Problem Statement

Create a CSS code that:

Changes the background color of specific elements using the background-color property.
Demonstrates different ways to define colors (named colors, HEX, RGB, HSL).

Example:

Input: A div element with the text "Background Color Example".
Output: The background color changes based on the specified CSS.

Solution Steps

Target the HTML Element: Choose the element whose background you want to change (e.g., div, body, etc.).
Use the background-color Property: Apply the background-color property with your chosen color format.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Background Color</title>
    <style>
        /* Step 2: Change background color using a named color */
        .background-named {
            background-color: lightblue;
        }

        /* Change background color using HEX value */
        .background-hex {
            background-color: #ff6347; /* tomato */
        }

        /* Change background color using RGB value */
        .background-rgb {
            background-color: rgb(60, 179, 113); /* mediumseagreen */
        }

        /* Change background color using HSL value */
        .background-hsl {
            background-color: hsl(120, 100%, 75%); /* light green */
        }
    </style>
</head>
<body>

    <div class="background-named">This background is lightblue (named color).</div>
    <div class="background-hex">This background is tomato (HEX color).</div>
    <div class="background-rgb">This background is mediumseagreen (RGB color).</div>
    <div class="background-hsl">This background is light green (HSL color).</div>

</body>
</html>

Explanation

Step 1: Target the HTML Element

We apply the background-color property to different <div> elements.

Step 2: Use the `background-color` Property

Each div element uses a different color format (named, HEX, RGB, HSL) to demonstrate multiple ways to set the background color.

Output

How to Change the Background Color in CSS

Conclusion

Changing the background color in CSS is simple with the background-color property. You can use different color formats like named colors, HEX, RGB, and HSL for more design flexibility.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog