Inline, Internal, and External Style Sheets: When to Use Each
CSS can live in three different places: directly on a tag, inside the page it styles, or in its own file shared across every page that links to it. Same language, three delivery methods, each with a different scope.
This is the written version of my inline, internal, and external style sheets video, part of my CSS beginners course. It's embedded near the top.
Key Takeaways
- Inline styles live in a tag's
styleattribute. They apply to that one element only. - Internal styles live in a
<style>tag in<head>. They apply to the whole page, but no other page. - External styles live in a separate
.cssfile linked with<link>. They apply to every page that links to it. - For a real, multi-page project, external is almost always the right default.
- When styles conflict, inline wins over internal and external, regardless of where those other rules appear in the file.
Inline styles
An inline style goes directly on the tag, in a style attribute:
<h1 style="color: red; font-weight: bold;">Welcome</h1>This applies only to that specific <h1>. Add a second <h1> elsewhere on the page and it won't inherit any of this styling; you'd have to repeat the style attribute on every element you want to match. That makes inline styles fine for a genuine one-off override, but a poor fit for styling anything repeated across a page.
Internal style sheets
An internal style sheet lives in a <style> tag inside <head>, and it applies to every matching element on that page:
<head>
<style>
h1 {
color: red;
font-weight: bold;
}
p {
color: green;
}
</style>
</head>Every <h1> on this page turns red now, including ones added later, without repeating anything. The catch: this only affects the page it's written on. A second page in the same project, about.html, say, gets none of these rules unless you paste the same <style> block into it too.
External style sheets
An external style sheet is a separate .css file, linked from any page that wants its rules:
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>/* style.css */
h1 {
color: green;
}
p {
color: red;
}Add that same <link> tag to every page in the project, and one file now styles all of them. Change a rule in style.css and every linked page updates at once. This is what makes external stylesheets the standard approach for anything beyond a single, throwaway page: one source of truth instead of copy-pasted <style> blocks.
Which one should you actually use
For a real project with more than one page, external is the default. Reach for internal when a style genuinely belongs to one page only, a one-off landing page, or while quickly prototyping before you've settled on a shared file structure. Reach for inline rarely: a genuine one-off override, or a quick debugging change you don't intend to keep. None of the three is wrong to use; they're suited to different scopes, from one element, to one page, to a whole site.
When rules conflict
Because all three methods can apply to the same element at once, CSS needs a tiebreaker, and inline wins by default over anything written in a <style> tag or an external file, regardless of where those rules appear or in what order. This is the beginning of a broader topic called specificity and the cascade, covered in more depth in Basic CSS Crash Course's section on rule order. For now, the practical takeaway: if a style refuses to apply and you're not sure why, check whether an inline style attribute on that element is quietly overriding it.
See MDN's guide to applying CSS to a document for more on how these three methods fit together.
Where to go next
What is CSS? covers the cascade concept this post touches on in more depth. CSS Colors and CSS Element, ID, and Class Selectors build on the external-stylesheet pattern shown here.
FAQ
What's the difference between internal and external style sheets?
An internal style sheet lives in a <style> tag on one page and only affects that page. An external style sheet lives in a separate .css file linked from any page that includes it, so one file can style an entire site.
When should I use inline styles?
Rarely: for a genuine one-off override on a single element, or a quick debugging change. For anything repeated or shared across a page or a site, internal or external styles are the better fit.
Which style wins if inline, internal, and external all target the same element?
Inline wins, regardless of where the other rules are written or in what order. This is part of CSS's broader specificity and cascade system.
Do I need a separate CSS file for every page?
No. One external .css file can be linked from as many pages as you want, and every page that links it gets the same rules. That's the main advantage over internal style sheets.
Can I mix all three methods on one project?
Yes. Most real projects lean almost entirely on external stylesheets, with the occasional inline override for something genuinely one-off. There's no rule against mixing them, just diminishing returns on relying on inline or internal styles as a project grows.
