Complete Web Designing Course for Beginners

📘 MODULE 3 – CSS Fundamentals

🖍️ Lesson 3.2 – Inline CSS

🎨 Applying CSS Directly Inside HTML Elements

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Inline CSS

✅ Apply CSS Directly to HTML Elements

✅ Change Text Colors

✅ Change Background Colors

✅ Change Font Size

✅ Align Text

✅ Create Beautiful Webpages Using Inline CSS

📖 Introduction

In the previous lesson, we learned:

HTML creates webpage structure.

CSS makes webpages beautiful.

Now the question is:

Where do we write CSS?

There are three ways:

1️⃣ Inline CSS

2️⃣ Internal CSS

3️⃣ External CSS

In this lesson, we will learn:

🖍️ Inline CSS

🤔 What is Inline CSS?

Inline CSS means writing CSS directly inside an HTML tag.

Example:

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

Here

style=""

contains CSS code.

🌟 Why is it Called Inline CSS?

Because CSS is written inside the same line as the HTML element.

Example:

<p style="color:blue;">
Hello
</p>

HTML and CSS are together.

🏗️ Syntax of Inline CSS

<tag style="property:value;">

Content

</tag>

Example

<h1 style="color:red;">

Welcome Students

</h1>

Understanding the Code

color:red;

Means:

Text Color = Red

Output

Welcome Students

Displayed in Red Color.

🎨 Changing Text Color

Property:

color:

Example

<h1 style="color:blue;">

NextGen Dev Hub

</h1>

Output

Blue Heading

More Examples

<p style="color:green;">

Learning CSS

</p>

<p style="color:orange;">

Web Designing Course

</p>

Common Color Names

red

blue

green

yellow

orange

purple

black

white

🌄 Changing Background Color

Property:

background-color:

Example

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

Welcome Students

</h1>

Output

Yellow Background

Example

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

Learning CSS

</p>

🔠 Changing Font Size

Property:

font-size:

Example

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

NextGen Dev Hub

</h1>

Meaning

Text Size = 40 Pixels

Example

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

Web Designing Course

</p>

🎯 Text Alignment

Property:

text-align:

Center Alignment

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

Welcome Students

</h1>

Output

Centered Heading

Left Alignment

text-align:left;

Right Alignment

text-align:right;

Example

<p style="text-align:right;">

Right Side Text

</p>

🌟 Multiple CSS Properties

We can use multiple properties together.

Example

<h1
style="

color:white;

background-color:blue;

font-size:40px;

text-align:center;

">

NextGen Dev Hub

</h1>

Output

White Text

Blue Background

Large Font

Centered Text

Understanding Semicolon

Each property ends with:

Example:

color:red;

font-size:30px;

text-align:center;

🎨 Styling Paragraphs

Example

<p

style="

color:green;

font-size:20px;

">

Learning CSS Fundamentals

</p>

Output

Green Large Paragraph

💻 Complete Example Program

<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1

style="

color:white;

background-color:blue;

font-size:40px;

text-align:center;

">

NextGen Dev Hub

</h1>

<p

style="

color:green;

font-size:20px;

">

Learning Web Designing

</p>

</body>

</html>

🎯 Expected Output

Blue Background Heading

White Text

Large Font

Centered Alignment

Green Paragraph

🏫 Real World Example

Student Profile Page

<h1

style="

color:blue;

">

Rahul Kumar

</h1>

<p

style="

color:green;

">

Polytechnic Student

</p>

🌟 Creating a Colorful Webpage

Example

<h1 style="color:red;">

Welcome

</h1>

<h2 style="color:blue;">

Web Designing

</h2>

<h3 style="color:green;">

Course

</h3>

Output

Three headings with different colors.

⚠️ Common Beginner Mistakes

Mistake 1

Missing Style Attribute

Wrong:

<h1 color="red">

Welcome

</h1>

Correct:

<h1 style="color:red;">

Welcome

</h1>

Mistake 2

Forgetting Semicolon

Wrong:

color:red

Correct:

color:red;

Mistake 3

Incorrect Property Name

Wrong:

text-color:red;

Correct:

color:red;

🌟 Advantages of Inline CSS

✅ Easy to Learn

✅ Quick Styling

✅ Useful for Small Projects

✅ Beginner Friendly

❌ Disadvantages of Inline CSS

❌ Repeated Code

❌ Difficult to Manage Large Websites

❌ Not Professional for Big Projects

🌟 Best Practices

✅ Use Inline CSS for learning.

✅ Use meaningful colors.

✅ Keep designs simple.

✅ Use multiple properties carefully.

🏆 Mini Project – Student Introduction Page

Create:

<h1

style="

color:blue;

text-align:center;

">

Rahul Kumar

</h1>

<p

style="

color:green;

font-size:20px;

">

Polytechnic Student

</p>

📝 Practical Activity

Create a webpage containing:

Your Name

Blue Color

Centered

College Name

Green Color

Career Goal

Red Color

Large Font

Favorite Subject

Yellow Background

Run it in Chrome Browser.

📋 Assignment

Assignment 3.2

What is Inline CSS?
Which attribute is used for Inline CSS?
Which property changes text color?
Which property changes background color?
Which property changes font size?
Which property aligns text?
Create a colorful webpage using Inline CSS.

🧠 Quiz

Q1. Which attribute is used for Inline CSS?

A. css

B. design

C. style

D. color

✅ Answer: C

Q2. Which property changes text color?

A. background

B. color

C. text

D. font

✅ Answer: B

Q3. Which property changes background color?

A. background-color

B. color

C. bg

D. fill

✅ Answer: A

Q4. Which property changes font size?

A. size

B. text-size

C. font-size

D. font

✅ Answer: C

Q5. Which property centers text?

A. align

B. text-align

C. center

D. position

✅ Answer: B

📌 Lesson Summary

✅ Inline CSS is written inside HTML elements.

✅ The style attribute is used for Inline CSS.

✅ color changes text color.

✅ background-color changes background color.

✅ font-size changes text size.

✅ text-align aligns text.

✅ Inline CSS is simple and beginner-friendly.