Introduction
CSS can be added to HTML in different ways to style web pages. Each method has its own use case, advantages, and limitations.
Understanding how to add CSS properly is important for writing clean, maintainable, and professional code.
In this lesson, you will learn the three main ways to add CSS to HTML: Inline CSS, Internal CSS, and External CSS.
What You’ll Learn
- Inline CSS
- Internal CSS
- External CSS
- Differences between them
- Best practices
🔹 1. Inline CSS
Inline CSS is used to apply styles directly inside an HTML element using the style attribute.
Example:
<p style="color: red; font-size: 18px;">This is a paragraph.</p>
Explanation:
- CSS is written inside the HTML tag
- Applied only to that specific element
✅ Advantages:
- Quick and easy for small changes
- Useful for testing styles
❌ Disadvantages:
- Not reusable
- Makes code messy
- Hard to maintain
👉 Use inline CSS only for small or temporary styling
🔹 2. Internal CSS
Internal CSS is written inside a <style> tag within the <head> section of an HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body><p>This is a paragraph.</p></body>
</html>
Explanation:
- Styles apply to the entire page
- Written in one place
✅ Advantages:
- Better than inline CSS
- Easy to manage for single-page websites
❌ Disadvantages:
- Cannot be reused across multiple pages
- Increases page size
👉 Suitable for small projects or single pages
🔹 3. External CSS (Most Recommended 🔥)
External CSS is written in a separate .css file and linked to HTML using the <link> tag.
Step 1: Create CSS File (style.css)
p {
color: green;
font-size: 18px;
}
Step 2: Link CSS File
<link rel="stylesheet" href="style.css">
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body><p>This is a paragraph.</p></body>
</html>
✅ Advantages:
- Reusable across multiple pages
- Clean and organized code
- Easy to maintain
- Best for real-world projects
❌ Disadvantages:
- Requires an extra file
👉 This is the best method used in professional development
🔹 Comparison of All Methods
| Method | Usage Level | Reusability | Maintainability |
|---|---|---|---|
| Inline | Low | No | Poor |
| Internal | Medium | Limited | Moderate |
| External | High | Yes | Excellent |
🔹 Real-Life Example
Inline CSS:
<h1 style="color: red;">Title</h1>
Internal CSS:
<style>
h1 {
color: blue;
}
</style>
External CSS:
h1 {
color: green;
}
👉 Same styling, different methods.
🔹 When to Use Each Method
Understanding when to use each CSS method is important in real-world development.
- Inline CSS → Use for quick testing or small changes
- Internal CSS → Use for single-page websites or demos
- External CSS → Use for multi-page websites and real projects
👉 In professional development, external CSS is always preferred
🔹 Real-World Scenario Example
Imagine you are building a website with multiple pages like Home, About, and Contact.
If you use inline CSS, you will have to repeat styles on every page ❌
If you use internal CSS, styles are limited to one page ❌
But with external CSS, you can write styles once and use them everywhere ✅
👉 This saves time and improves consistency.
🔹 Linking Multiple CSS Files
You can link more than one CSS file in a project.
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
👉 This is useful for:
- Responsive design
- Modular development
🔹 Inline vs External (Performance Insight)
- Inline CSS increases HTML size
- External CSS is cached by browsers
👉 This means:
- Faster loading for repeat visits
- Better performance
🔹 Why External CSS is Best (Expanded)
External CSS is preferred because:
- Separates design from structure
- Makes updates easier
- Reduces code duplication
- Improves website speed
- Helps in team collaboration
👉 This is why all professional websites use external CSS.
🔹 Best Practices
- Prefer external CSS for most projects
- Avoid excessive inline CSS
- Keep styles separate from HTML
- Use meaningful class names
- Organize CSS properly
🔹 How Browsers Apply CSS
If multiple CSS methods are used, priority is:
- Inline CSS (Highest priority)
- Internal CSS
- External CSS (Lowest priority)
👉 This is known as CSS priority order
🔹 Important Notes
- Always link external CSS correctly
- Use
<style>only when needed - Keep code clean and readable
- Follow proper structure
🔹 Common Mistakes
- Forgetting to link CSS file
- Using inline CSS everywhere
- Mixing all methods unnecessarily
- Incorrect file path in
<link>
🔹 Practice Tasks
- Task 1: Create a paragraph using inline CSS.
- Task 2: Add internal CSS to style headings.
- Task 3: Create an external CSS file and link it.
- Task 4: Apply same style using all three methods.
FAQs
What is the best way to add CSS?
External CSS is the best method for most projects.
Can we use all three methods together?
Yes, but it is not recommended unless necessary.
Why avoid inline CSS?
It makes code difficult to maintain and reuse.
Conclusion
There are three main ways to add CSS: inline, internal, and external. Each method has its own use case, but external CSS is the most efficient and widely used in real-world development.
👉 In the next tutorial, you will learn about Colors, Units & Backgrounds to style text and backgrounds.