Complete Web Designing Course for Beginners

MODULE 3 – CSS Fundamentals

🎨 Lesson 3.5 – Colors & Backgrounds

🌈 Making Websites Attractive Using Colors and Background Effects

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand CSS Colors

✅ Apply Text Colors

✅ Use Background Colors

✅ Use HEX Colors

✅ Use RGB Colors

✅ Apply Background Images

✅ Create Beautiful Webpages

✅ Understand Professional Color Usage

📖 Introduction

Imagine two websites.

Website 1

Black Text

White Background

Looks very simple.

Website 2

Blue Heading

Light Background

Beautiful Design

Looks professional.

What creates this beauty?

🎨 CSS Colors & Backgrounds

🤔 What is Color in CSS?

CSS Colors are used to change:

✅ Text Color

✅ Background Color

✅ Borders

✅ Buttons

✅ Links

🌟 Color Property

Used to change text color.

Syntax:

color:value;

Example

h1{

color:red;

}

Output

Red Heading

HTML Example

<h1>

Welcome Students

</h1>

CSS

h1{

color:blue;

}

Result

Blue Heading

🎨 Color Names

CSS provides many predefined color names.

Common Colors

red

blue

green

yellow

orange

purple

pink

black

white

brown

gray

Example

h1{

color:purple;

}

Example

p{

color:green;

}

🌟 Background Color

Used to change background color.

Syntax:

background-color:value;

Example

body{

background-color:yellow;

}

Result

Entire webpage becomes yellow.

Example

h1{

background-color:lightblue;

}

Result

Blue background behind heading.

🎯 Combining Text and Background Colors

h1{

color:white;

background-color:blue;

}

Result

White Text

Blue Background

Example

p{

color:black;

background-color:lightgreen;

}

🌈 HEX Colors

Professional websites often use:

HEX Color Codes

Syntax

#RRGGBB

Example:

#FF0000

Means:

Red

Common HEX Colors

Color	HEX Code
Red	#FF0000
Green	#00FF00
Blue	#0000FF
White	#FFFFFF
Black	#000000
Yellow	#FFFF00
Purple	#800080

Example

h1{

color:#0000FF;

}

Result

Blue Heading

Example

body{

background-color:#F5F5F5;

}

Result

Light Gray Background

🌟 RGB Colors

RGB means:

Red Green Blue

Syntax

rgb(red,green,blue)

Example

rgb(255,0,0)

Red

Example

rgb(0,255,0)

Green

Example

rgb(0,0,255)

Blue

CSS Example

h1{

color:rgb(255,0,0);

}

Result

Red Heading

More RGB Examples

rgb(255,255,0)

Yellow

rgb(255,165,0)

Orange

rgb(128,0,128)

Purple

🎯 Color Methods Comparison

Method	Example
Name	red
HEX	#FF0000
RGB	rgb(255,0,0)

All create the same color.

🌄 Background Images

CSS can use images as backgrounds.

Syntax

background-image:url("image.jpg");

Example

body{

background-image:url("bg.jpg");

}

Result

Image appears behind webpage content.

📁 Folder Structure

Website

│

├── index.html

├── style.css

│

└── background.jpg

CSS Example

body{

background-image:url("background.jpg");

}

🎯 Background Repeat

By default image repeats.

Example

background-repeat:no-repeat;

Result

Image appears only once.

🎯 Background Size

Makes image cover the screen.

Example

background-size:cover;

Result

Image fills entire screen.

Example

body{

background-image:url("background.jpg");

background-repeat:no-repeat;

background-size:cover;

}

🌟 Complete Example

HTML

<!DOCTYPE html>

<html>

<head>

<title>Colors Example</title>

<link
rel="stylesheet"
href="style.css">

</head>

<body>

<h1>

NextGen Dev Hub

</h1>

<p>

Learning CSS Colors

</p>

</body>

</html>

CSS

body{

background-color:#F5F5F5;

}

h1{

color:white;

background-color:blue;

text-align:center;

}

p{

color:green;

font-size:20px;

}

🎯 Expected Output

Light Gray Background

Blue Heading

White Text

Green Paragraph

🏫 Real World Example – College Website

body{

background-color:#EAF6FF;

}

h1{

color:darkblue;

}

p{

color:#333333;

}

🌈 Professional Color Combination

Education Website

Blue + White

Professional

Business Website

Dark Blue + Gray

Professional

Portfolio Website

Black + Orange

Modern

Technology Website

Dark Blue + Cyan

Tech Look

⚠️ Common Beginner Mistakes

Mistake 1

Using Too Many Colors

Wrong:

red

green

yellow

purple

pink

orange

Creates messy design.

Correct:

Use 2–3 main colors.

Mistake 2

White Text on White Background

Wrong:

color:white;

background-color:white;

Text becomes invisible.

Mistake 3

Very Bright Colors Everywhere

Avoid excessive neon colors.

🌟 Best Practices

✅ Use limited colors.

✅ Maintain good contrast.

✅ Use HEX colors in professional projects.

✅ Use background images carefully.

✅ Keep designs clean.

🏆 Mini Project – Colorful Student Profile

HTML

<h1>

Rahul Kumar

</h1>

<p>

Polytechnic Student

</p>

CSS

body{

background-color:lightyellow;

}

h1{

color:blue;

}

p{

color:green;

}

📝 Practical Activity

Create a webpage containing:

Your Name

Blue Color

College Name

Green Color

Career Goal

Purple Color

Entire Page

Light Yellow Background

Run it in Chrome Browser.

📋 Assignment

Assignment 3.5

What is the purpose of the color property?
What is the purpose of background-color?
What are HEX colors?
What does RGB stand for?
How do you add a background image?
Create a webpage using at least three colors.
Apply a background color to the webpage.

🧠 Quiz

Q1. Which property changes text color?

A. background

B. color

C. text

D. font

✅ Answer: B

Q2. Which property changes background color?

A. background-color

B. color

C. fill

D. image

✅ Answer: A

Q3. Which HEX code represents white?

A. #000000

B. #FFFFFF

C. #FF0000

D. #00FF00

✅ Answer: B

Q4. RGB stands for?

A. Red Gray Blue

B. Red Green Black

C. Red Green Blue

D. Random Green Blue

✅ Answer: C

Q5. Which property adds a background image?

A. image

B. background

C. background-image

D. picture

✅ Answer: C

📌 Lesson Summary

✅ CSS colors make webpages attractive.

✅ color changes text color.

✅ background-color changes background color.

✅ Colors can be written using names, HEX codes, or RGB values.

✅ background-image adds images behind webpage content.

✅ Professional websites use carefully selected color combinations.