Complete Web Designing Course for Beginners

MODULE 3 – CSS Fundamentals

🎨 Lesson 3.1 – Introduction to CSS

🌈 Making Websites Beautiful with Cascading Style Sheets

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what CSS is

✅ Understand why CSS is important

✅ Understand how CSS works

✅ Differentiate HTML and CSS

✅ Apply basic CSS styles

✅ Add colors to webpages

✅ Change text appearance

✅ Create attractive webpages

📖 Introduction

Imagine building a house.

HTML creates:

🏠 Walls

🏠 Doors

🏠 Windows

🏠 Rooms

But the house still looks plain.

Now imagine adding:

🎨 Paint

🛋️ Furniture

💡 Lighting

🖼️ Decorations

The house becomes beautiful.

Similarly:

HTML creates webpage structure.

CSS makes webpages beautiful.

🤔 What is CSS?

CSS stands for:

🎨 Cascading Style Sheets

CSS is used to control:

Colors
Fonts
Layouts
Backgrounds
Spacing
Borders
Animations

💡 Simple Definition

CSS is a language used to style and design HTML webpages.

🌍 Why Was CSS Created?

In the early days of web development:

HTML was used for both:

Structure
Design

This made webpages difficult to manage.

Example:

<font color="red">
Welcome Students
</font>

This approach became messy.

To solve this problem:

CSS was introduced.

Now:

HTML handles structure.

CSS handles design.

🎯 HTML vs CSS

HTML	CSS
Structure	Design
Creates Content	Beautifies Content
Headings	Colors
Paragraphs	Fonts
Images	Layout
Forms	Styling

🏠 Real Life Example

Think about a human body.

HTML

Skeleton

CSS

Clothes, Hair Style, Appearance

Without CSS:

A webpage works.

But it looks boring.

Example Without CSS

<h1>Welcome Students</h1>

<p>This is Web Designing Course.</p>

Output:

Welcome Students

This is Web Designing Course.

Simple.

Example With CSS

<h1 style="color:blue;">
Welcome Students
</h1>

Output:

Blue heading.

More attractive.

🌟 What Can CSS Control?

CSS controls:

🎨 Colors

Example:

color: red;

Changes text color.

🖼️ Background

Example:

background-color: yellow;

Changes background color.

🔠 Fonts

Example:

font-size: 30px;

Changes text size.

📏 Spacing

Example:

margin: 20px;

Adds spacing.

🧱 Borders

Example:

border: 2px solid black;

Creates borders.

🔄 How CSS Works

Process:

HTML Creates Structure

↓

CSS Applies Design

↓

Browser Displays Styled Page

Example

HTML:

<h1>NextGen Dev Hub</h1>

CSS:

h1{
color:blue;
}

Result:

Blue heading.

🎯 Ways to Add CSS

There are three ways:

1️⃣ Inline CSS

2️⃣ Internal CSS

3️⃣ External CSS

1️⃣ Inline CSS

CSS written directly inside HTML tags.

Example

<h1 style="color:red;">
Welcome Students
</h1>

Output

Red heading.

Understanding

style=

allows CSS inside HTML.

Advantages

✅ Easy

✅ Quick

Disadvantages

❌ Not suitable for large websites.

2️⃣ Internal CSS

CSS written inside:

<style>

tag.

Example

<!DOCTYPE html>

<html>

<head>

<style>

h1{
color:blue;
}

</style>

</head>

<body>

<h1>Welcome Students</h1>

</body>

</html>

Output

Blue heading.

Advantages

✅ Better organization

✅ Suitable for small projects

3️⃣ External CSS

Professional method.

CSS stored in a separate file.

Example

File:

style.css

Inside:

h1{
color:green;
}

Connect with HTML:

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

Benefits

✅ Professional

✅ Reusable

✅ Easy maintenance

✅ Used in real websites

🌈 First CSS Property – Color

The most basic CSS property.

Example

color: red;

Complete Example

<h1 style="color:red;">
Welcome Students
</h1>

Output

Red Heading

More Colors

color: blue;

Blue

color: green;

Green

color: purple;

Purple

color: orange;

Orange

🌈 Background Color

Changes background color.

Example

background-color: yellow;

HTML Example

<body style="background-color:yellow;">

Output

Yellow page background.

🔠 Font Size

Controls text size.

Example

font-size: 40px;

HTML Example

<h1 style="font-size:40px;">
Welcome
</h1>

Output

Large heading.

🧱 Text Alignment

Controls text position.

Example

text-align:center;

HTML Example

<h1 style="text-align:center;">
Welcome Students
</h1>

Output

Heading appears in center.

💻 Complete Example

<!DOCTYPE html>

<html>

<head>

<title>My First CSS Page</title>

</head>

<body
style="background-color:lightblue;">

<h1
style="color:red;
text-align:center;">

Welcome Students

</h1>

<p
style="font-size:20px;">

This is my first CSS webpage.

</p>

</body>

</html>

🎯 Expected Output

✅ Light Blue Background

✅ Red Heading

✅ Center Aligned Heading

✅ Large Paragraph Text

🌟 Real World Example

College Website:

<h1
style="color:blue;">

ABC Polytechnic College

</h1>

Blue heading looks more professional than plain black text.

⚠️ Common Beginner Mistakes

Mistake 1

Missing Semicolon

Wrong:

color:red
font-size:20px

Correct:

color:red;

font-size:20px;

Mistake 2

Incorrect Property Name

Wrong:

textcolor:red;

Correct:

color:red;

Mistake 3

Misspelling Style Attribute

Wrong:

<h1 stlye="color:red;">

Correct:

<h1 style="color:red;">

🌟 Best Practices

✅ Use CSS for design.

✅ Keep HTML for structure.

✅ Use meaningful colors.

✅ Avoid too many colors.

✅ Use External CSS for large projects.

🏆 Mini Project – Colorful Student Profile

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

</head>

<body
style="background-color:lightyellow;">

<h1
style="color:blue;
text-align:center;">

Rahul Kumar

</h1>

<p
style="font-size:20px;">

Polytechnic Student

</p>

<p
style="color:green;">

Learning Web Designing

</p>

</body>

</html>

📝 Practical Activity

Create a webpage containing:

Your Name

Blue Color

Your College Name

Green Color

Background Color

Light Yellow

Career Goal

Font Size 20px

Run in Chrome.

📋 Assignment

Assignment 2.1

Answer the following:

What does CSS stand for?
Why is CSS used?
What is the difference between HTML and CSS?
Name three ways to add CSS.
Which CSS property changes text color?
Which property changes background color?
Create a webpage using CSS colors.

🧠 Quiz

Q1. What does CSS stand for?

A. Computer Style Sheets

B. Cascading Style Sheets

C. Creative Style System

D. Cascading System Style

✅ Answer: B

Q2. Which technology is used for webpage design?

A. HTML

B. CSS

C. SQL

D. Python

✅ Answer: B

Q3. Which property changes text color?

A. font

B. text

C. color

D. background

✅ Answer: C

Q4. Which property changes background color?

A. bg

B. background

C. background-color

D. color

✅ Answer: C

Q5. Which is the professional way to add CSS?

A. Inline CSS

B. Internal CSS

C. External CSS

D. None

✅ Answer: C

📌 Lesson Summary

✅ CSS stands for Cascading Style Sheets.

✅ CSS is used to style and beautify webpages.

✅ HTML creates structure, CSS creates design.

✅ CSS can change colors, fonts, backgrounds, spacing, and layouts.

✅ CSS can be added using Inline, Internal, and External methods.

✅ External CSS is the professional approach.

✅ CSS transforms plain webpages into attractive websites.