Lesson 17 of 55 · HTML
Inline vs External CSS
Duration: 7 min
Where to Put CSS
| Method | Scope | Performance | Maintainability |
|---|---|---|---|
Inline (style='…') | Single element only | No extra HTTP request, but overrides all other styles | Hard to manage, discouraged |
Internal (<style>) | Page‑specific | CSS loaded with HTML, no extra request | Better than inline but still mixes concerns |
External (<link>) | Site‑wide or shared | Cached by browser, reduces HTML size | Clean separation of concerns, recommended |
When to use inline styles
- For dynamic values generated by JavaScript (e.g.,
element.style.width = '50%'). - For quick debugging of a single element.
Best‑practice CSS workflow
- Write modular, component‑based CSS (BEM, CSS Modules, or utility‑first like Tailwind).
- Keep global styles in an external stylesheet.
- Add critical CSS inline only if you need to eliminate the first‑paint delay.
Quick checklist for styling approach
- Majority of styles in external files? ✅
- Internal
<style>used only for critical CSS? ✅ - Inline
style=avoided except for runtime changes? ✅ - Naming convention (BEM, OOCSS) in place? ✅
If any answer is “no”, reorganise your CSS now.
Tip: Use a CSS preprocessor (Sass, Less) or PostCSS to keep styles DRY and maintainable.