FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Styling

Intermediate

Inline CSS

Learn Inline CSS as the bridge between clean HTML and professional CSS: visual hierarchy, maintainable styling, responsive behavior and live practice.

HTML styling foundation

Inline CSS is direct, powerful and easy to abuse.

Inline CSS uses the style attribute directly on an HTML element. It can be useful for tiny experiments, email templates, generated one-off values or dynamic CSS custom properties.

The danger is maintenance. When every element has its own style attribute, the design system disappears. You cannot easily reuse, search, override or improve the styling later.

Learn inline CSS so you understand it, but do not build your normal website styling around it.

style attribute

Places CSS declarations directly on one element.

High specificity

Inline styles override many normal stylesheet rules.

One-off values

Useful for generated values such as progress, coordinates or email fallbacks.

Maintenance risk

Repeated inline styling becomes hard to update fast.

Syntax and structure

The style attribute contains CSS declarations.

Inline CSS does not use selectors because it already sits on the element being styled.

Inline style used for a one-off value

<article class="progress-card" style="--progress: 72%;">
  <h1>HTML progress</h1>
  <div class="progress-bar" aria-label="72 percent complete">
    <span></span>
  </div>
</article>

<style>
  .progress-bar span {
    width: var(--progress);
  }
</style>

Inline style used as the whole design system

<h1 style="font-size: 42px; color: red; margin: 0;">Title</h1>
<p style="font-size: 18px; color: #555; margin-top: 14px;">Text</p>
<a style="color: red; font-weight: bold; text-decoration: none;">Link</a>
<button style="background: red; color: white; border-radius: 99px;">Send</button>

HTML quick reference

Reusable examples for quick reference.

Use these patterns when you need the syntax quickly. Each example has its own anchor, so search engines and readers can land directly on the exact pattern instead of only at the top of the lesson.

Semantic pattern

HTML pattern 1

A clean version of the markup from this lesson. Use it when you need the correct HTML shape quickly.

<article class="progress-card" style="--progress: 72%;">
  <h1>HTML progress</h1>
  <div class="progress-bar" aria-label="72 percent complete">
    <span></span>
  </div>
</article>

<style>
  .progress-bar span {
    width: var(--progress);
  }
</style>
What this gives you

Meaningful markup that stays understandable before CSS and JavaScript are added.

Editable lab starter

HTML pattern 2

The starting point from the practice lab. Change the HTML first, then use CSS only for presentation.

<article class="score-card" style="--score: 68%;">
  <p class="eyebrow">Course progress</p>
  <h1>HTML Styling</h1>
  <div class="meter" aria-label="68 percent complete"><span></span></div>
  <p>Only the progress value is inline. The design stays in CSS.</p>
</article>

<style>
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  font-family: Inter, system-ui, sans-serif;
  background: #07111f;
  color: white;
}

.score-card {
  width: min(680px, calc(100% - 32px));
  padding: 32px;
  border-radius: 24px;
  background: #101a2d;
}

.eyebrow { color: #8cffc1; font-weight: 800; text-transform: uppercase; }
.meter { height: 16px; overflow: hidden; border-radius: 999px; background: #263247; }
.meter span { display: block; height: 100%; width: var(--score); background: linear-gradient(90deg, #8cffc1, #62d5ff); }
p { color: #cfd8e6; line-height: 1.7; }
</style>
What this gives you

A complete practice snippet that shows how the HTML behaves in context.

Pattern to avoid

HTML pattern 3

A weak pattern from the lesson. Use it as a warning sign when reviewing real pages.

<h1 style="font-size: 42px; color: red; margin: 0;">Title</h1>
<p style="font-size: 18px; color: #555; margin-top: 14px;">Text</p>
<a style="color: red; font-weight: bold; text-decoration: none;">Link</a>
<button style="background: red; color: white; border-radius: 99px;">Send</button>
What this gives you

A recognizable mistake you can search for and refactor.

Rules that matter

CSS becomes powerful when it is written as a system.

Styling is not only making something look nice once. Good CSS stays readable, reusable and predictable while the project grows.

Use sparingly

Inline CSS is strongest when it expresses one unique value, not a reusable component style.

Prefer classes

If multiple elements need the same look, use a class and write CSS once.

Watch specificity

Inline styles can make normal CSS harder to override.

Do not hide meaning

The style attribute should not replace semantic HTML or accessible text.

Useful for generated values

CSS variables in style attributes can connect backend or JavaScript values to CSS safely.

Avoid style soup

Long style attributes are hard to read and usually signal that CSS belongs in a stylesheet.

Production thinking

CSS affects trust, accessibility, performance and maintainability.

Why does this matter?

This matters because beginners often discover style="" first and then use it everywhere. That works for one element, but it collapses when the project grows.

Accessibility

Inline styles can create contrast and focus problems just like any CSS. Do not remove focus outlines or rely only on color because it is quick.

Production note

Use inline CSS intentionally: email HTML, critical one-off values, generated CSS variables or prototyping. Move reusable styling to internal or external CSS.

SEO note

Inline CSS does not directly improve SEO. It can hurt maintenance if the page becomes messy, slow or inconsistent.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change --score from 68% to 92% in the HTML.
  • Move one visual declaration from HTML into CSS if you add one.
  • Run the preview and explain why the class still controls the design.

Practice assignment

Do this before moving to the next lesson.

  1. Use inline CSS only for one dynamic value.
  2. Keep reusable colors, spacing and typography in CSS selectors.
  3. Write down when inline CSS would be acceptable in a real project.

Try it yourself

Use inline CSS for one dynamic value

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?