CSS (Cascading Style Sheets) can be applied to HTML in three different ways — Inline, Internal, and External. This guide explains all three with practical examples and best use cases.
🔹 What is CSS?
CSS stands for Cascading Style Sheets. It is used to style HTML elements — control colors, fonts, layout, spacing, and more. There are three main ways to apply CSS to HTML:
- Inline CSS
- Internal CSS
- External CSS
🔸 1. Inline CSS
Inline CSS is written directly inside the HTML tag using the style attribute. It is useful for quick, one-time styling.
<p style="color: red; font-size: 20px;">This is an inline styled paragraph.</p>
When to use: For small changes or testing, not recommended for larger projects.
🔸 2. Internal CSS
Internal CSS is written within a <style> tag inside the <head> section of an HTML file. It is useful when styles are specific to a single page.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>Styled with internal CSS.</p>
</body>
</html>
When to use: For single HTML documents with specific styles.
🔸 3. External CSS
External CSS is written in a separate file with the .css extension and linked to the HTML file using the <link> tag.
/* styles.css */
body {
background-color: #f2f2f2;
}
h1 {
color: green;
}
HTML File:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>This is styled with external CSS</h1>
</body>
</html>
When to use: Best for large websites with multiple pages. Promotes code reusability and maintainability.
✅ Comparison Table
| Type | Where Written | Use Case | Best For |
|---|---|---|---|
| Inline CSS | Inside HTML element | Quick fixes | Testing or small tweaks |
| Internal CSS | <style> in <head> | Single-page styling | Pages with unique style |
| External CSS | In separate .css file | Reusable styling | Large websites |
🔚 Conclusion
Understanding the different types of CSS helps you choose the right method depending on your project's size and scope. For most modern websites, **external CSS** is the preferred and scalable option.