What are CSS inline styles?

Inline styles are CSS declarations written directly on an HTML element using the style attribute, like style="color: rebeccapurple;".

They’re “inline” because they live inside the HTML, not in a <style> tag and not in a separate .css file.

  • Inline styles apply to one element (the element that has the style attribute).
  • They can be useful for quick demos, one-off tweaks, and for setting CSS custom properties (variables) per element.
  • They can also create “why won’t my CSS work?” moments, because they’re hard to override.

Your first inline style

Let’s start simple: we’ll style a single button using inline CSS. This is the “hello world” of inline styles. 

/* This snippet intentionally does very little. */
/* Switch to HTML view to see the inline styles. */
.note {
  font-style: italic;
}

/* A tiny bit of "normal" CSS styling */
button {
  font: inherit;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #111;
  background: #fff;
  cursor: pointer;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 16px;
  display: grid;
  gap: 12px;
  max-width: 520px;
}

p {
  margin: 0;
  line-height: 1.4;
}


  

    Switch to the HTML view to see the inline styles on the button.

How inline style syntax works

  • The attribute is named style.
  • Inside it, you write CSS declarations like property: value;.
  • Declarations are separated by semicolons (;).
  • You generally should keep the final semicolon too. It prevents annoying mistakes when adding more declarations later.

Inline styles vs normal CSS (cascade + specificity)

Inline styles usually “win” over styles written in your stylesheet. That’s the biggest inline-style superpower… and also its biggest “oops”.

Switch to HTML view to see the inline style. Then go back and click each CSS snippet and notice what changes (and what refuses to change). 

/* Try to change the card’s background with normal CSS */
.card {
  background: #f2f2f2;
}

/* Try to change the card’s background using a more specific selector */
.wrap .card {
  background: #ffe9a8;
}

/* Change something that is NOT set inline */
.card {
  border-radius: 18px;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 16px;
  max-width: 560px;
}

.card {
  border: 2px solid #111;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.card strong {
  font-size: 18px;
}


  

    Switch to the HTML view. The card has an inline background.
  


  

    Inline background
    

      Normal CSS tries to override my background… but inline styles are stubborn.

Why inline styles win

In the CSS cascade, inline styles are treated as very “strong” author styles. So when you write style="background: ...", it’s typically stronger than:

  • A class selector like .card { ... }
  • A more specific selector like .wrap .card { ... }
  • Even many complicated selectors (unless we bring out the !important hammer)

Learn more about the cascade in the CSS Cascade Interactive Tutorial, and about specificity in the CSS Specificity Interactive Tutorial.

Overriding inline styles (the !important plot twist)

Sometimes you really need to override inline styles (for example, you’re cleaning up legacy HTML or dealing with content you can’t control).

The classic override tool is !important. Use it carefully: it can fix a problem quickly, but it can also create a bigger one later.

Switch to HTML view to see the inline color. Then activate each snippet and watch what wins. 

/* Normal CSS loses to inline color */
.badge {
  color: #111;
}

/* !important can override inline styles */
.badge {
  color: #111 !important;
}

/* Another override example */
.badge {
  background: #fff !important;
  border-color: #111 !important;
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 16px;
  max-width: 560px;
  display: grid;
  gap: 12px;
}

.badge {
  display: inline-block;
  border: 2px solid #111;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
}


  

    Switch to the HTML view: this badge has inline color and background.
  


  
    Inline-styled badge

When to use !important (and when not to)

  • Reasonable use: you’re overriding inline styles you can’t remove (CMS output, third-party widgets, email HTML, etc.).
  • Not great: you’re using !important because your CSS architecture is messy and you’re tired.

If you control the HTML, it’s usually better to remove the inline style and use classes instead.

Learn more about !important in the CSS !important Interactive Tutorial.

Inline styles and CSS variables (the “good” inline style pattern)

One of the best uses of inline styles is setting CSS custom properties per element, like: style="--accent: hotpink;"

This keeps the “real” styling in your CSS, while the inline part just provides data (values). 

.card {
  border-left: 10px solid var(--accent);
}

.card strong {
color: var(--accent);
}

.card .pill {
background: var(--accent);
} 
/* A theme-y variant using the same inline variable */
.card {
  background: color-mix(in srgb, var(--accent) 12%, white);
  border-left: 10px solid var(--accent);
}

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 16px;
  max-width: 720px;
  display: grid;
  gap: 12px;
}

.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
  border: 2px solid #111;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.pill {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  color: white;
  font-weight: 700;
}


  

    Switch to the HTML view: each card sets --accent inline.
  


  

    

      Ocean card
      accent
      

        The inline style sets a variable, and the CSS uses it.
      

    


    

      Pink card
      accent
      

        Same CSS. Different inline value.

Why this pattern is so useful

  • The inline style is small and “data-like” (just variables).
  • Your real styling stays in CSS where it’s maintainable.
  • You can reuse the same component styles with different per-element values.

Common inline style mistakes (and how to avoid them)

1) Forgetting units

Many CSS properties require units. width: 200 is invalid, but width: 200px works. 

/* Nothing to activate here. */
/* Switch to HTML view to see the inline style differences. */

*,
::before,
::after {
  box-sizing: border-box;
}

.wrap {
  font-family: ui-sans-serif, system-ui, sans-serif;
  padding: 16px;
  max-width: 680px;
  display: grid;
  gap: 12px;
}

.row {
  display: grid;
  gap: 10px;
}

.demo {
  border: 2px solid #111;
  border-radius: 12px;
  padding: 10px;
  background: #f2f2f2;
}

.label {
  font-weight: 700;
}


  

    Switch to HTML view. One box uses an invalid inline value (missing unit).
  


  

    

      Valid:
      style="width: 220px;"
    


    

      Invalid:
      style="width: 220;" (missing unit)

2) Overwriting inline styles by accident

Inline styles are a single attribute. If you add another style="..." attribute, the HTML is invalid (and browsers will pick one). If you generate HTML dynamically, make sure you’re merging inline declarations instead of overwriting them.

3) Mixing presentation into content

Inline styles can make HTML harder to read and maintain. If you see big blocks of inline CSS, that’s usually a sign the styles should live in a class in your stylesheet.

When should you use inline styles?

Good reasons

  • Quick demos (like in learning materials).
  • One-off, truly unique elements where making a whole new class isn’t worth it.
  • Per-element CSS variables (a very maintainable inline style pattern).
  • Email HTML, where inline styles are common (and sometimes required).

Reasons to avoid

  • You need consistency across many elements (classes are better).
  • You want themes / responsive variants / hover states (inline can’t do :hover by itself).
  • You keep fighting “why won’t my CSS override this?” (inline often causes that).

Mini FAQ

Can inline styles do hover?

Not directly. Inline styles apply a fixed set of declarations to that element. Pseudo-classes like :hover live in CSS selectors, so you’ll need a stylesheet rule for hover behavior.

Are inline styles “bad”?

They’re a tool. They become “bad” when they’re used everywhere and make your code hard to maintain. For learning demos and for inline CSS variables, they can be genuinely great.

Why is my class not working?

First suspect: an inline style is overriding it. If the inline style sets the same property, it will usually win unless your CSS uses !important.

Quick checklist

  • Inline styles usually override your stylesheet rules.
  • !important can override inline styles, but use it carefully.
  • Consider using inline styles mainly for CSS variables (--something) and keep the real styling in CSS.