Why Inline, internal, and external CSS? - Purpose & Use Cases

The Big Idea

Discover how a simple change in where you write styles can save hours of work!

The Scenario

Imagine you want to make your website look nice by changing colors and fonts. You start by adding style directly to each word or sentence in your page.

The Problem

Doing this means you have to repeat the same style many times. If you want to change the color later, you must find and update every single place manually. This takes a lot of time and can cause mistakes.

The Solution

Using inline, internal, and external CSS lets you write styles once and apply them everywhere. You can keep styles inside the page or in separate files, making updates easy and your code clean.

Before vs After

✗ Before

<p style="color: red; font-size: 20px;">Hello</p>
<p style="color: red; font-size: 20px;">Welcome</p>

✓ After

<style> p { color: red; font-size: 20px; } </style>
<p>Hello</p>
<p>Welcome</p>

What It Enables

You can quickly change the look of your whole website by editing just one place.

Real Life Example

A company website uses external CSS files so they can update the brand colors and fonts on all pages instantly without touching each page separately.

Key Takeaways

Writing styles inline repeats code and is hard to maintain.

Internal CSS groups styles inside the page for easier updates.

External CSS stores styles in separate files for reuse across many pages.