Adding CSS
There are three ways to add CSS to an HTML page:
1. Inline CSS
Apply styles directly to an element using the style attribute:
Demo: Inline CSS
HTML
<p style="color: #6366f1; font-weight: bold;">This paragraph is styled inline.</p>Live Output Window
2. Internal CSS
Use a <style> tag inside the <head>:
Demo: Internal CSS
HTML
<style>
.highlight {
background: #fef9c3;
padding: 8px 16px;
border-radius: 4px;
}
</style>
<p class="highlight">This uses internal CSS.</p>Live Output Window
3. External CSS
Link to a separate .css file — the most maintainable approach:
Demo: External CSS (Simulated)
HTML
<p class="external-demo">This would be styled via an external .css file.</p> CSS
.external-demo {
color: #059669;
font-size: 1.125rem;
border-bottom: 2px solid #059669;
padding-bottom: 4px;
}Live Output Window
Comparison
| Method | Best For | Pros | Cons |
|---|---|---|---|
| Inline | One-off overrides | Quick, no extra file | Hard to maintain, high specificity |
| Internal | Single-page demos | No extra request | Not reusable across pages |
| External | Production sites | Reusable, cacheable, maintainable | Extra HTTP request |
Best practice: Use external CSS files for production and inline/internal only for quick experiments or prototypes.