Home 〉 CSS Tutorials 〉 CSS background-color Tutorial with Examples – Learn Easily

CSS background-color Tutorial with Examples – Learn Easily !

CSS background-color Tutorial with Examples – Learn Easily !

How do you change the background color of HTML elements using CSS?

This tutorial teaches you how to use the 'background-color' property to enhance the visual appeal of your web pages. Learn through examples how to apply solid colors, gradients, and more.

Introduction

The 'background-color' property in CSS is used to set the **background color of HTML elements**. It's one of the most used CSS properties to improve the visual style of your webpage.

Let's break it down step-by-step with real examples.

Syntax of 'background-color'

Syntax ✍

selector {
background-color: value;
}

CSS background-color Examples (with HTML)

Set a Simple Named Color

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
background-color: lightblue;
padding: 20px;
color: black;
}

</style>
</head>
<body>

<div class="box">This box has a light blue background.</div>

</body>
</html>

output 📌

This box has a light blue background.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

You can use common color names like 'red', 'green', 'blue', 'lightblue', etc.

Use Hexadecimal Color Code

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
background-color: #ffcc00;
padding: 20px;
color: #000;
}

</style>
</head>
<body>

<div class="box">Background color using hex code #ffcc00.</div>

</body>
</html>

output 📌

Background color using hex code #ffcc00.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

Hex codes allow precise color control, especially for brand colors.

Use RGB Color

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
background-color: rgb(255, 99, 71);
padding: 20px;
color: white;
}

</style>
</head>
<body>

<div class="box">This box uses RGB color (tomato red).</div>

</body>
</html>

output 📌

This box uses RGB color (tomato red).
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

RGB uses values from 0 to 255 for red, green, and blue.

Use RGBA (with Transparency)

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
background-color: rgba(0, 128, 0, 0.5);
padding: 20px;
color: white;
}

</style>
</head>
<body>

<div class="box">This green background is 50% transparent.</div>

</body>
</html>

output 📌

This green background is 50% transparent.
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

RGBA adds an alpha value (opacity) from 0 (fully transparent) to 1 (fully opaque).

Use HSL Color Model

html code 📝

<!DOCTYPE html>
<html>
<head>
<style>

.box {
background-color: hsl(240, 100%, 75%);
padding: 20px;
color: #000;
}

</style>
</head>
<body>

<div class="box">Background uses HSL (light blue color).</div>

</body>
</html>

output 📌

Background uses HSL (light blue color).
Try It....

You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.

Explanation:

HSL stands for Hue, Saturation, and Lightness. It's another color format used in CSS.

Apply to Whole Page

Example 📄

<style>
body {
background-color: #f0f8ff;
}
</style>

Explanation:

This changes the entire page background color.

Related Tips

  • Use contrasting colors for text and background to improve readability.
  • Try using semi-transparent backgrounds ('rgba') for overlay effects.

Conclusion

The 'background-color' property is a simple but powerful tool in CSS. Whether you're setting color with names, hex codes, RGB, or HSL, it helps bring your layout to life. Try each format and find what works best for your website style.

Suggested Topics:

Related Topics:

Frequently Asked Questions (FAQs) - CSS Background Color

What does background-color do in CSS?

It sets the background color of an HTML element.

Can I use color names in background-color?

Yes. CSS supports over 140 color names like red, green, blue, and lightgray.

What's the difference between RGB and RGBA?

RGBA includes a fourth value for transparency (alpha), while RGB does not.

Can I set background-color on the whole page?

Yes, apply 'background-color' to the 'body' tag in your CSS.

Which color format should I use?

Use hex for simple colors, RGB for full control, and RGBA for transparency. HSL is helpful for adjusting color tones.

Previous Post Next Post