CSS
What Are the 3 Types of CSS? A Complete Beginner’s Guide
CSS (Cascading Style Sheets) is the language used to style HTML content. Whether you’re changing text color, adding layout spacing, or designing responsive websites, CSS is essential for creating visually appealing web pages.
But did you know that there are three main types of CSS? Each serves a different purpose and is suited to specific use cases.
In this post, we’ll explore the three types of CSS—Inline, Internal, and External—with practical examples and tips on when to use each.
🧩 1. Inline CSS
🔹 What is it?
Inline CSS means adding styles directly to an HTML element using the style attribute.
💡 Example:
<p style="color: red; font-size: 18px;">This is a red paragraph.</p>
✅ Pros:
- Quick and easy for small changes
- Good for testing or debugging styles
❌ Cons:
- Not reusable
- Clutters HTML
- Poor for maintainability
- Can’t handle pseudo-classes (like
:hover)
🛠️ Best Used For:
- Quick fixes
- Email templates (where external styles may not work)
- Testing styles directly in HTML
🧩 2. Internal CSS
🔹 What is it?
Internal CSS is defined within a <style> tag inside the <head> of an HTML document.
💡 Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>This is an internal CSS example</h1>
</body>
</html>
✅ Pros:
- Keeps CSS and HTML in the same file
- Good for single-page or demo projects
- Can use selectors, media queries, and pseudo-classes
❌ Cons:
- Not reusable across pages
- Slows down page rendering if overused
- Not ideal for large websites
🛠️ Best Used For:
- Single-page websites
- Demos and prototypes
- Pages with minimal styling
🧩 3. External CSS
🔹 What is it?
External CSS is written in a separate .css file and linked to the HTML document using the <link> tag.
💡 Example:
style.css
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
index.html
<head>
<link rel="stylesheet" href="style.css">
</head>
✅ Pros:
- Clean separation of content and style
- Reusable across multiple pages
- Easier to maintain and scale
- Ideal for team collaboration and large projects
❌ Cons:
- Requires additional HTTP request (can be minimized with bundling)
- Can be less convenient for tiny one-off changes
🛠️ Best Used For:
- Multi-page websites
- Large and complex projects
- Maintainable and scalable codebases
🧠 Summary Table
| CSS Type | Location | Reusability | Ideal Use Case |
|---|---|---|---|
| Inline | In HTML element | ❌ | Quick fixes, emails |
| Internal | In <style> tag | ❌ | Single pages, small projects |
| External | .css file | ✅ | Large sites, scalable projects |
🏁 Final Thoughts
Understanding the three types of CSS is fundamental for any web developer. As your projects grow in size and complexity, you’ll find that using external CSS offers the best flexibility and maintainability.
That said, inline and internal CSS have their place too—especially when you’re building quick prototypes or working in restricted environments like email templates.