🎨 Module 15 · CSS Integration🟡 IntermediateLESSON 52

Inline CSS

⏱️ 11 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress63%

🎯 What you'll learn: The style attribute, why it wins CSS specificity battles, and when using it is (rarely) the right call.

Section 1

The style Attribute

Inline styles are CSS declarations written directly on an element via the style attribute — no selector needed, since the element itself is the target.

inline-css.html

HTML

<p style="color: #fb7185; font-weight: bold;">
  Important notice
</p>

Section 2

Specificity — Why Inline Wins

Inline styles have the highest specificity of any normal CSS rule — higher than IDs, classes, or element selectors. This means an inline style will override a stylesheet rule targeting the same element, even a very specific one, unless that rule uses !important.

specificity-battle.html

HTML

/* In CSS: */
#alert-box { color: blue; }

<!-- In HTML: this wins, even though #alert-box looks more specific -->
<div id="alert-box" style="color: red;">Alert</div>

⚠️

This is exactly why inline styles are usually avoided

Because they always win, inline styles become hard to override later — a maintainer has to either add !important or hunt down and delete the inline style itself.

Section 3

When Inline Styles Actually Make Sense

Situation	Why inline works here
Values computed by JavaScript at runtime	e.g. a progress bar's exact width — no class can express a dynamic number
Email HTML	Most email clients strip <style> blocks, so inline is often required
One-off, throwaway prototypes	Speed over maintainability, for something not shipping long-term

💡

For everything else, use classes

Reusable, cacheable, easier to override, and separates content from presentation — the reasons CSS classes exist in the first place.

🧩 Knowledge Check — Lesson 52

5 questions to test your understanding.

1. How does an inline style's specificity compare to an ID selector in CSS?

2. What can override an inline style?

3. Why are inline styles a reasonable choice for HTML email?

4. When is a dynamic JS-computed value a good use case for inline style?

5. What's the main maintainability downside of inline styles?

💪

Coding Challenge — Lesson 52

Apply what you learned · Intermediate Level

Challenge: Build a JS-Driven Progress Bar

Build a div acting as a progress fill, and write JS that sets its style.width to "72%" — demonstrating the one legitimate case for inline styles: a truly dynamic value.

💡 Show hints if you're stuck

element.style.width = '72%' sets an inline style via JS.

Finished this lesson?

Mark it complete to track your progress.

Lesson 52 of 62Module 15 — CSS Integration

Inline CSS

The style Attribute

Specificity — Why Inline Wins

When Inline Styles Actually Make Sense

Lesson 52 Complete!