How to Add CSS — When to Use Inline, Internal, or External
There are three ways to add CSS code to an HTML document. Each method has its use cases and advantages.
1. Inline CSS
Written directly inside an HTML tag using the style attribute.
<h1 style="color:blue;">2. Internal CSS
Written inside a <style> tag in the <head> section.
<style> h1 { color: red; } </style>3. External CSS
Written in a separate .css file and linked to the page.
<link rel="stylesheet" href="style.css">1. Inline CSS
Used to apply a unique style to a single element. Not recommended for heavy use because it makes code messy.
<h1 style="color: blue; text-align: center;">This is a blue heading</h1>
Result in the browser:
This is a blue heading
2. Internal CSS
Used when a single page needs its own styles different from the rest of the site.
<head>
<style>
body { background-color: linen; }
h1 { color: maroon; margin-right: 40px; }
</style>
</head>
Result in the browser:
Internally styled heading
3. External CSS - Best
This is the professional approach. You write all styles in one file (e.g., style.css) and link it across all pages.
In style.css:
body { background-color: lightblue; }
h1 { color: navy; }
In the HTML page:
<head>
<link rel="stylesheet" href="style.css">
</head>
Result in the browser:
Heading styled from an external CSS file
Why is the external method best? Because you can change the entire site (even thousands of pages) by editing just one file.
Lesson Summary
- Inline: inside the element (quick tweaks).
- Internal: in the page head (one page).
- External: in a separate file (professional sites).
- Always use External CSS in real projects.
Next step: Now that we know where to write code, let us learn how to write it (rules and sentence structure).