CSS Colors & Backgrounds

Introduction

Colors and backgrounds are among the first things people notice on a website. Good use of colors improves readability, branding, and user experience, while poor color choices can make a site difficult to use.

In this chapter, you will learn:

• Different ways to define colors in CSS
• How background properties work
• How to use images and gradients
• Practical, real-world styling examples

Everything is explained in simple language with clear examples.

CSS Color Property

The color property is used to set the text color of an element.

Basic example:

p {
  color: red;
}

This changes the text color of all paragraphs to red.

Ways to Define Colors in CSS

CSS supports multiple color formats. Each has its own use case.

1. Color Names

CSS provides predefined color names.

h1 {
  color: blue;
}

Common color names: red, blue, green, black, white, gray, orange.

2. HEX Color Codes

HEX colors are the most commonly used format in real projects.

Syntax: color: #RRGGBB;

p {
  color: #333333;
}

Explanation:

• RR → Red
• GG → Green
• BB → Blue

Short HEX: color: #333; (Same as #333333)

3. RGB Colors

RGB stands for Red, Green, Blue.

Syntax: color: rgb(255, 0, 0);

h2 {
  color: rgb(0, 128, 0);
}

Values range from 0 to 255.

4. RGBA Colors (With Transparency)

RGBA allows you to control opacity.

Syntax: color: rgba(0, 0, 0, 0.5);

p {
  color: rgba(0, 0, 0, 0.7);
}

The last value (alpha) ranges from 0 (fully transparent) to 1 (fully opaque).

5. HSL Colors

HSL stands for Hue, Saturation, Lightness.

h1 {
  color: hsl(200, 80%, 50%);
}

HSL is useful when working with design systems and themes.

CSS Background Properties

Background Color

The background-color property sets the background color of an element.

div {
  background-color: #f5f5f5;
}

Background Image

The background-image property is used to set an image as a background.

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

Background Repeat

Controls whether a background image repeats.

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

body {
  background-repeat: no-repeat;
}

Background Position

Controls the position of the background image.

body {
  background-position: center;
}

Other values: top, bottom, left, right.

Background Size

Controls the size of the background image.

body {
  background-size: cover;
}

• cover → fills the container
• contain → fits inside container

Background Attachment

Controls scrolling behavior.

body {
  background-attachment: fixed;
}

Creates a parallax-like effect.

Background Shorthand Property

You can combine multiple background properties into one.

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

Gradient Backgrounds

CSS allows gradient backgrounds without images.

Linear Gradient

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

Radial Gradient

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

Real-World Example: Card Design

.card {
  background-color: white;
  border: 1px solid #ddd;
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

This is commonly used in:

• Product cards
• Blog posts
• Dashboards

Common Mistakes & Best Practices