Complete Web Designing Course for Beginners

MODULE 3 – CSS Fundamentals

🌐 Lesson 3.4 – External CSS

🎨 Creating Professional Websites Using Separate CSS Files

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand External CSS

✅ Create Separate CSS Files

✅ Link CSS Files with HTML

✅ Style Multiple Webpages

✅ Organize Code Professionally

✅ Understand Industry Standard Web Development

📖 Introduction

In the previous lessons, we learned:

Inline CSS

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

CSS written inside HTML.

Internal CSS

<style>

h1{

color:red;

}

</style>

CSS written inside the same HTML file.

Both methods work.

But professional websites may have:

Hundreds of Pages
Thousands of Elements
Complex Designs

Managing CSS inside HTML becomes difficult.

To solve this problem we use:

🌐 External CSS

🤔 What is External CSS?

External CSS means:

Writing CSS in a separate file.

Example:

index.html

and

style.css

HTML contains content.

CSS file contains design.

🌟 Why Use External CSS?

Advantages:

✅ Cleaner Code

✅ Easier Maintenance

✅ Reusable CSS

✅ Professional Method

✅ Faster Development

🏗️ Project Structure

Example:

Website Folder

│

├── index.html

│

└── style.css

🌟 Step 1 – Create HTML File

Create:

index.html

Example

<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

</head>

<body>

<h1>

NextGen Dev Hub

</h1>

<p>

Learning External CSS

</p>

</body>

</html>

🌟 Step 2 – Create CSS File

Create:

style.css

Example

h1{

color:blue;

}

p{

color:green;

}

🌟 Step 3 – Link CSS File

Inside HTML Head Section:

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

Complete HTML File

<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

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

</head>

<body>

<h1>

NextGen Dev Hub

</h1>

<p>

Learning External CSS

</p>

</body>

</html>

Understanding Link Tag

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

rel

rel="stylesheet"

Means:

This file contains CSS.

href

href="style.css"

Means:

Location of CSS file.

🎯 How External CSS Works

HTML File

↓

Browser Reads HTML

↓

Browser Finds CSS Link

↓

Loads CSS File

↓

Applies Styles

↓

Displays Styled Webpage

🌟 First External CSS Example

HTML:

<h1>

Welcome Students

</h1>

CSS:

h1{

color:red;

}

Output

Red Heading

🎨 Styling Multiple Elements

CSS:

h1{

color:blue;

font-size:40px;

text-align:center;

}

p{

color:green;

font-size:20px;

}

HTML:

<h1>

NextGen Dev Hub

</h1>

<p>

Learning Web Designing

</p>

Output

Blue Heading

Green Paragraph

🌟 Styling Entire Webpage

CSS:

body{

background-color:lightyellow;

}

Result

Entire webpage gets light yellow background.

Example

body{

background-color:lightgray;

}

🎯 Complete Example Project

index.html

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

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

</head>

<body>

<h1>

Rahul Kumar

</h1>

<p>

Polytechnic Student

</p>

</body>

</html>

style.css

body{

background-color:lightyellow;

}

h1{

color:blue;

text-align:center;

}

p{

color:green;

font-size:20px;

}

🎯 Expected Output

Light Yellow Background

Blue Centered Heading

Green Paragraph

🌟 One CSS File for Multiple Pages

Example:

Website

│

├── index.html

├── about.html

├── contact.html

│

└── style.css

All pages use:

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

Benefit

Change CSS once.

Entire website updates automatically.

🏫 Real World Example

Large websites like:

Google
Facebook
Amazon
YouTube

use External CSS.

Because they contain thousands of pages.

🌟 Comparing CSS Types

Feature	Inline	Internal	External
Easy for Beginners	✅	✅	✅
Reusable	❌	❌	✅
Professional	❌	⚠️	✅
Best for Large Websites	❌	❌	✅
Easy Maintenance	❌	⚠️	✅

💻 Complete Practical Example

index.html

<!DOCTYPE html>

<html>

<head>

<title>My Website</title>

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

</head>

<body>

<h1>

My First Website

</h1>

<p>

Learning External CSS

</p>

</body>

</html>

style.css

body{

background-color:lightblue;

}

h1{

color:white;

background-color:blue;

text-align:center;

}

p{

color:black;

font-size:20px;

}

⚠️ Common Beginner Mistakes

Mistake 1

Wrong CSS File Name

HTML:

href="style.css"

Actual File:

styles.css

Result:

CSS will not work.

Mistake 2

Placing CSS File in Wrong Folder

HTML cannot find the file.

Mistake 3

Forgetting Link Tag

Wrong:

<head>

<title>Website</title>

</head>

Correct:

<head>

<title>Website</title>

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

</head>

🌟 Advantages of External CSS

✅ Professional

✅ Reusable

✅ Easy Maintenance

✅ Faster Development

✅ Used in Industry

❌ Disadvantages

❌ Requires separate file

❌ Beginners may forget linking

🌟 Best Practices

✅ Keep CSS in separate files.

✅ Use meaningful file names.

✅ Place CSS inside a dedicated folder.

✅ Use External CSS for projects.

🏆 Mini Project – Student Profile Website

Create:

index.html

<h1>
Your Name
</h1>

<p>
Your College
</p>

Create:

style.css

Apply:

✅ Blue Heading

✅ Green Paragraph

✅ Light Yellow Background

📝 Practical Activity

Create:

StudentWebsite

│

├── index.html

│

└── style.css

Display:

✅ Name

✅ College

✅ Branch

✅ Career Goal

Apply styles using External CSS.

📋 Assignment

Assignment 3.4

What is External CSS?
Why is External CSS used?
Which tag links CSS files?
What does href mean?
What does rel="stylesheet" mean?
Create an HTML file and CSS file.
Link them together.

🧠 Quiz

Q1. Which tag links External CSS?

A. <css>

B. <style>

C. <link>

D. <script>

✅ Answer: C

Q2. Which attribute specifies the CSS file location?

A. src

B. href

C. link

D. file

✅ Answer: B

Q3. Which CSS method is most professional?

A. Inline CSS

B. Internal CSS

C. External CSS

D. All Same

✅ Answer: C

Q4. Where is CSS written in External CSS?

A. HTML Body

B. HTML Head

C. Separate CSS File

D. Paragraph

✅ Answer: C

Q5. Which file extension is used for CSS?

A. .html

B. .js

C. .css

D. .txt

✅ Answer: C

📌 Lesson Summary

✅ External CSS is written in a separate .css file.

✅ HTML and CSS remain separate.

✅ CSS files are linked using the <link> tag.

✅ External CSS is the professional and industry-standard method.

✅ One CSS file can style multiple webpages.

✅ External CSS makes websites easier to maintain.