MODULE 3 – CSS Fundamentals
🏠 Lesson 3.3 – Internal CSS
🎨 Styling Multiple HTML Elements Using the <style> Tag
🎯 Learning Objectives
After completing this lesson, students will be able to:
✅ Understand Internal CSS
✅ Use the <style> Tag
✅ Apply CSS to Multiple Elements
✅ Understand CSS Selectors
✅ Style Entire Webpages Easily
✅ Create Cleaner HTML Code
✅ Compare Inline CSS and Internal CSS
📖 Introduction
In the previous lesson, we learned:
🖍️ Inline CSS
Example:
<h1 style="color:red;">
Welcome Students
</h1>This works well for small webpages.
But imagine a webpage with:
- 20 Headings
- 30 Paragraphs
- 10 Buttons
Writing:
style=""again and again becomes difficult.
To solve this problem we use:
🏠 Internal CSS
🤔 What is Internal CSS?
Internal CSS is CSS written inside the:
<style>tag.
The <style> tag is placed inside:
<head>section.
🌟 Structure of Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
CSS Code
</style>
</head>
<body>
HTML Code
</body>
</html>🎯 Why Use Internal CSS?
Advantages:
✅ Cleaner Code
✅ Easy Maintenance
✅ Style Multiple Elements
✅ More Professional
✅ Better Organization
🌟 First Internal CSS Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>
Welcome Students
</h1>
</body>
</html>Understanding the Code
CSS:
h1{
color:red;
}Meaning:
All h1 headings become red.Output
Red Heading
🎯 CSS Selector
In Internal CSS:
h1{
color:red;
}The word:
h1is called:
Selector
What is a Selector?
A selector tells CSS:
Which HTML element should be styled.Example
p{
color:blue;
}Meaning:
Apply blue color to all paragraphs.🌟 Styling Multiple Elements
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:red;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>Learning CSS</p>
</body>
</html>Output
Heading → Red
Paragraph → Blue
🎨 Adding Background Color
Example:
h1{
background-color:yellow;
}Result
Yellow background behind heading.
Example
p{
background-color:lightblue;
}🔠 Changing Font Size
Example
h1{
font-size:40px;
}Meaning
Heading size = 40 pixelsExample
p{
font-size:20px;
}🎯 Text Alignment
Example
h1{
text-align:center;
}Result
Heading appears in center.
🌟 Multiple Properties Together
Example:
h1{
color:white;
background-color:blue;
font-size:40px;
text-align:center;
}Result
✅ White Text
✅ Blue Background
✅ Large Font
✅ Centered
💻 Complete Example
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:white;
background-color:blue;
font-size:40px;
text-align:center;
}
p{
color:green;
font-size:20px;
}
</style>
</head>
<body>
<h1>
NextGen Dev Hub
</h1>
<p>
Learning Internal CSS
</p>
</body>
</html>🎯 Expected Output
Blue Heading
White Text
Large Font
Green Paragraph
🌟 Styling Multiple Headings
HTML
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>CSS
h1{
color:red;
}Output
All headings become red.
Why Internal CSS is Better Than Inline CSS?
Inline CSS:
<h1 style="color:red;">
HTML
</h1>
<h1 style="color:red;">
CSS
</h1>
<h1 style="color:red;">
JavaScript
</h1>Repeated code.
Internal CSS:
h1{
color:red;
}Cleaner and easier.
🎯 Styling the Entire Body
The webpage body can also be styled.
Example:
body{
background-color:lightyellow;
}Result
Entire webpage background becomes light yellow.
Example
body{
background-color:lightgray;
}🌟 Complete Student Profile Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:lightyellow;
}
h1{
color:blue;
text-align:center;
}
p{
color:green;
font-size:20px;
}
</style>
</head>
<body>
<h1>
Rahul Kumar
</h1>
<p>
Polytechnic Student
</p>
</body>
</html>🏫 Real World Example
College Website
body{
background-color:#f5f5f5;
}
h1{
color:darkblue;
}
p{
color:black;
}⚠️ Common Beginner Mistakes
Mistake 1
Placing Style Tag Inside Body
Wrong:
<body>
<style>
h1{
color:red;
}
</style>
</body>Correct:
<head>
<style>
h1{
color:red;
}
</style>
</head>Mistake 2
Forgetting Curly Brackets
Wrong:
h1
color:red;Correct:
h1{
color:red;
}Mistake 3
Missing Semicolon
Wrong:
color:redCorrect:
color:red;🌟 Advantages of Internal CSS
✅ Cleaner Code
✅ Easy to Manage
✅ Styles Multiple Elements
✅ More Professional
✅ Suitable for Medium Projects
❌ Disadvantages
❌ CSS cannot be reused on multiple webpages.
❌ Large projects become difficult.
(External CSS solves this problem.)
🌟 Best Practices
✅ Write CSS inside <style> tag.
✅ Place <style> inside <head>.
✅ Use meaningful colors.
✅ Keep code organized.
🏆 Mini Project – Student Information Page
Create:
<h1>
Your Name
</h1>
<p>
Your College
</p>
<p>
Your Career Goal
</p>Apply:
✅ Blue Heading
✅ Green Paragraphs
✅ Light Yellow Background
📝 Practical Activity
Create a webpage containing:
Your Name
Blue Color
Centered
College Name
Green Color
Branch
Orange Color
Career Goal
Purple Color
Apply:
body{
background-color:lightyellow;
}📋 Assignment
Assignment 3.3
- What is Internal CSS?
- Which tag is used for Internal CSS?
- Where should the style tag be placed?
- What is a selector?
- Which property changes text color?
- Which property changes background color?
- Create a webpage using Internal CSS.
🧠 Quiz
Q1. Which tag is used for Internal CSS?
A. <css>
B. <style>
C. <design>
D. <script>
✅ Answer: B
Q2. Internal CSS is usually written inside:
A. Body
B. Footer
C. Head
D. Paragraph
✅ Answer: C
Q3. Which selector styles all paragraphs?
A. body
B. h1
C. p
D. img
✅ Answer: C
Q4. Which property changes text color?
A. font
B. background
C. color
D. size
✅ Answer: C
Q5. Which property centers text?
A. align
B. center
C. text-align
D. position
✅ Answer: C
📌 Lesson Summary
✅ Internal CSS is written inside the <style> tag.
✅ The <style> tag is placed inside the <head> section.
✅ Internal CSS can style multiple HTML elements at once.
✅ Selectors identify which elements to style.
✅ Internal CSS is cleaner and more professional than Inline CSS.