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:

  1. What does CSS stand for?
  2. Why is CSS used?
  3. What is the difference between HTML and CSS?
  4. Name three ways to add CSS.
  5. Which CSS property changes text color?
  6. Which property changes background color?
  7. 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.

PreviousNext