Lesson 3: Colors & Backgrounds

Overview

Colors and backgrounds are essential for making websites visually appealing. CSS allows you to apply colors to text, backgrounds, borders, and more.

Types of Colors in CSS

1. Color Names

CSS supports predefined color names.

h1 {
  color: blue;
}

2. HEX Colors

Hexadecimal values start with #.

p {
  color: #ff0000; /* red */
}

3. RGB Colors

Defines colors using Red, Green, Blue values.

div {
  color: rgb(255, 0, 0);
}

4. RGBA Colors (with transparency)

Adds opacity (alpha value).

div {
  color: rgba(255, 0, 0, 0.5);
}

Background Properties

1. Background Color

body {
  background-color: lightgray;
}

2. Background Image

body {
  background-image: url("background.jpg");
}

3. Background Repeat

Controls image repetition.

body {
  background-repeat: no-repeat;
}

Options:

• repeat (default)
• no-repeat
• repeat-x
• repeat-y

4. Background Position

Controls where the image appears.

body {
  background-position: center;
}

5. Background Size

Controls image size.

body {
  background-size: cover;
}

Options:

• cover (fills entire screen)
• contain (fits inside container)

6. Background Shorthand

Combine all properties in one line:

body {
  background: lightblue url("bg.jpg") no-repeat center/cover;
}

Gradients

CSS gradients create smooth color transitions.

Linear Gradient

div {
  background: linear-gradient(to right, blue, purple);
}

Radial Gradient

div {
  background: radial-gradient(circle, red, yellow);
}

Example: Full Styling

HTML

<!DOCTYPE html>
<html>
<body>

<h1>Welcome</h1>
<p>This is a styled page.</p>

</body>
</html>

CSS

body {
  background: linear-gradient(to right, #74ebd5, #acb6e5);
}

h1 {
  color: white;
  text-align: center;
}

p {
  color: #333;
  background-color: rgba(255, 255, 255, 0.8);
}

Common Mistakes to Avoid

• Using too many bright colors
• Poor contrast (hard to read text)
• Not optimizing background images
• Forgetting fallback colors

Best Practices

• Use consistent color schemes
• Ensure good contrast for readability
• Use modern formats like gradients instead of heavy images
• Keep design simple and clean

Key Takeaways

• CSS supports multiple color formats (name, HEX, RGB, RGBA)
• Backgrounds can include colors, images, and gradients
• Shorthand properties simplify code
• Good color choices improve user experience

What’s Next

In the next lesson — Typography & Fonts — you’ll learn how to style text, choose fonts, and improve readability on your website.