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:

h1

is 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 pixels

Example

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:red

Correct:

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

  1. What is Internal CSS?
  2. Which tag is used for Internal CSS?
  3. Where should the style tag be placed?
  4. What is a selector?
  5. Which property changes text color?
  6. Which property changes background color?
  7. 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.

PreviousNext