🎓 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-colorproperty. - 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-colorProperty: Apply thebackground-colorproperty 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-colorproperty 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
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.
Comments
Post a Comment
Leave Comment