Three Ways to Add CSS
CSS can be applied to HTML in three ways: inline (directly on an element), internal (inside a <style> tag), or external (in a separate .css file linked to the page).
Inline Styles
<p style="color: red; font-weight: bold;">
This paragraph uses an inline style.
</p>Internal Stylesheet
<style>
p {
color: green;
font-weight: bold;
}
</style>
<p>This paragraph is styled by an internal stylesheet.</p>External Stylesheet
<!-- In a real project, this rule would live in styles.css -->
<!-- and be linked with: <link rel="stylesheet" href="styles.css" /> -->
<!-- It's inlined below only so this preview can render it. -->
<style>
p {
color: blue;
font-weight: bold;
}
</style>
<p>This paragraph is styled as if from an external stylesheet.</p>Why This Preview Uses an Inline <style>
Live previews on this site render a single self-contained snippet, so they can’t fetch a separate styles.css file. The CSS above is shown inline purely to demonstrate the result — in a real project it would live in its own .css file and be linked with <link rel="stylesheet" href="styles.css" />.
Comparing the Three Methods
| Method | Scope | Typical Use |
|---|---|---|
| Inline | A single element | Quick one-off overrides, rarely recommended |
| Internal | The current page only | Small demos or single-page prototypes |
| External | Every page that links the file | Real projects — reusable and cacheable |
Which Should You Use?
External stylesheets are the standard for real projects: the browser caches the file, styles stay consistent across many pages, and HTML and CSS remain cleanly separated.
Avoid Inline Styles
Inline styles are hard to maintain and override, and they mix content with presentation. Reserve them for cases where styles are generated dynamically by JavaScript.
Best Practice
Start every real project with a single external stylesheet linked in the <head>. Split it into multiple files as the project grows, if needed.