The style attribute accepts one or more CSS declarations separated by semicolons. It applies rules only to that element and beats many stylesheet rules in specificity—use sparingly.
When inline styles make sense
- Rapid prototypes or CodePen-style experiments.
- HTML email templates where linked stylesheets are limited.
- Single-instance tweaks governed by a CMS field—still consider migrating to classes.
<p style="color: navy; font-weight: 600;">Callout with inline CSS.</p>Rendered output
Callout with inline CSS.
Drawbacks in production sites
- No reuse—every repetition duplicates declarations.
- Harder caching than external CSS files.
- Theming and dark mode become tedious without tokens.
- Specificity wars between inline styles and component CSS confuse maintainers.
Recommended split
Keep HTML declarative: describe roles with semantic tags. Express palettes, typography scales, spacing rhythm, and responsive breakpoints in stylesheets (see the CSS track). Inline styles rarely belong in design systems.
What developers miss
- Duplicate declarations: mixing inline styles with utility classes fights specificity—whoever edits last wins, unpredictably.
- CSP realities: inline styles blocked by Content-Security-Policy
unsafe-inlinebans require classes or hashed nonces (CSS track). - Dark mode tokens: hard-coded RGB in attributes cannot respond to prefers-color-scheme unless you duplicate markup—prefer CSS variables.
Why it matters
Design systems hinge on repeatable tokens (spacing, typography). Inline styles undermine refactors—you cannot “find usages” reliably when colors live on thousands of tags.
Important interview questions and answers
- Q: When should you use `strong` vs `b`?
A: Use `strong` for semantic importance; use `b` only for stylistic offset without importance semantics. - Q: Why is `target="_blank"` usually paired with `rel="noopener"`?
A: It blocks the opened page from controlling the opener via `window.opener`, improving security. - Q: Why avoid fake buttons built with ``?
A: Anchors are for navigation; actions should use `
Next: Inline styles are for demos; move rules to CSS in the next track.