Inline CSS is CSS written in an element's style attribute, like . The declarations apply to that one element only, with no selector.

Runnable CSS Docs: Inline CSS

Q: What are the 3 ways to add CSS to HTML?

Inline, with the style attribute on an element; internal, with a element in the page; and external, with a separate .css file linked by in the . External files are the usual choice for a whole site.

Q: Does inline CSS override external CSS?

Yes, in most cases. A declaration in the style attribute beats any selector in a stylesheet, whatever its specificity. The only way a stylesheet wins is with !important, and an inline !important beats that too.

Q: Can you use hover in inline CSS?

No. The style attribute only takes declarations, so pseudo-classes like :hover, pseudo-elements like ::before and @media rules cannot be written there. Put them in a element or a stylesheet.

What inline CSS is

Inline CSS is CSS written directly on an HTML element with the style attribute. The value is a list of declarations, property: value;, and they apply to that element only.

<p>A normal paragraph.</p>

<p style="color: #2563eb;">A blue paragraph.</p>

<p style="color: #16a34a; font-weight: bold; font-size: 20px;">
  Green, bold and 20px.
</p>

There is no selector and no curly braces: the element the attribute sits on is the target. Separate declarations with semicolons. The last semicolon is optional, but keeping it makes adding the next declaration safe.

Syntax

<element style="property: value; property: value;">

Part	Example	Notes
Attribute	`style="..."`	A global attribute: allowed on every HTML element
Declaration	`color: #2563eb;`	Same syntax as inside a stylesheet rule
Several declarations	`padding: 8px; border: 1px solid #e5e7eb;`	Separated by `;`
Quotes inside	`style="font-family: 'Courier New', monospace;"`	Use single quotes inside the double-quoted attribute

Anything that is not a declaration is not allowed. :hover, ::before, @media and selectors have no place in a style attribute.

The 3 ways to add CSS to HTML

CSS reaches a page in three ways. This page covers the first; external and internal CSS have their own page.

Method	Where the CSS lives	Scope	Typical use
Inline	`style` attribute on one element	That element	One-off values, values set by JavaScript
Internal	`<style>` element in the page	That page	Single-page demos, email templates, critical CSS
External	A `.css` file, linked with `<link>`	Every page that links it	Styling a whole site

The same paragraph styled all three ways (the external file is shown as a comment, because the preview has no second file to load):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three ways</title>
  <!-- External: <link rel="stylesheet" href="styles.css"> -->
  <style>
    /* Internal: one rule styles every matching element */
    .note {
      background: #e5e7eb;
      padding: 8px 12px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <p class="note">Styled by the internal rule.</p>
  <p class="note">Same rule, second paragraph.</p>
  <p class="note" style="background: #f59e0b;">Inline background wins here.</p>
</body>
</html>

The third paragraph keeps the padding and radius from the .note rule and only replaces the background, because the inline style sets just that one property.

Why inline styles win

When a stylesheet rule and an inline style set the same property, the inline style wins. It does not matter how specific the selector is: an ID selector still loses.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline wins</title>
  <style>
    #title { color: #16a34a; }
    p { color: #111827; }
  </style>
</head>
<body>
  <p id="title" style="color: #2563eb;">Blue: the inline style beats the ID selector.</p>
</body>
</html>

The one exception is !important. A stylesheet declaration marked !important beats a normal inline declaration, and an inline !important beats both. That is the reason inline styles make a site hard to maintain: to change them from a stylesheet you need !important, which starts an escalation. The !important page covers the full order.

When inline CSS is the right tool

Inline styles are a good fit when the value is data, not design: it changes per element and is written by a template or by JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Progress</title>
  <style>
    .track { background: #e5e7eb; border-radius: 999px; height: 12px; }
    .bar { background: #2563eb; height: 100%; border-radius: 999px; }
  </style>
</head>
<body>
  <p>Upload</p>
  <div class="track"><div class="bar" style="width: 35%;"></div></div>
  <p>Download</p>
  <div class="track"><div class="bar" style="width: 80%;"></div></div>
</body>
</html>

The look (colors, height, radius) lives in the stylesheet. Only the width, which differs per bar, is inline. JavaScript writes the same attribute through element.style:

<button id="btn">Make it amber</button>
<p id="msg">Watch this text.</p>
<script>
  document.getElementById('btn').addEventListener('click', () => {
    const msg = document.getElementById('msg');
    msg.style.color = '#f59e0b';
    msg.style.fontWeight = 'bold';
  });
</script>

After the click, the paragraph's HTML reads style="color: rgb(245, 158, 11); font-weight: bold;". Property names with a hyphen become camelCase in JavaScript (font-weight is fontWeight).

A CSS variable is often the cleanest middle ground: set only the variable inline, style="--progress: 35%", and let the stylesheet use it. See CSS variables.

Where inline CSS falls short

No states or pseudo-elements. You cannot write :hover, :focus or ::before in a style attribute.
No media queries. An inline width cannot change on a phone.
Repetition. Ten buttons with the same inline style means ten places to edit.
Hard to override. Only !important in a stylesheet beats it.
Content Security Policy. A strict CSP without 'unsafe-inline' in style-src blocks style attributes written in the HTML.

Common mistakes

Writing a selector or braces inside style. style="p { color: red }" is ignored. Only declarations go there.
Using = instead of :. It is color: red, not color=red.
Nesting double quotes. style="font-family: "Arial"" ends the attribute early. Use single quotes inside.
Forgetting units. style="width: 200" is ignored; write 200px. A length of 0 is the only one that may drop its unit.
Styling a whole site inline. Move repeated styles into a class in a stylesheet and keep inline styles for per-element values.

Frequently Asked Questions

What is inline CSS?

Inline CSS is CSS written in an element's style attribute, like <p style="color: red;">. The declarations apply to that one element only, with no selector.

What are the 3 ways to add CSS to HTML?

Inline, with the style attribute on an element; internal, with a <style> element in the page; and external, with a separate .css file linked by <link rel="stylesheet" href="styles.css"> in the <head>. External files are the usual choice for a whole site.

Does inline CSS override external CSS?

Yes, in most cases. A declaration in the style attribute beats any selector in a stylesheet, whatever its specificity. The only way a stylesheet wins is with !important, and an inline !important beats that too.

Is inline CSS bad practice?

For styling a whole site, yes: it repeats itself, cannot use :hover or media queries, and is hard to override. It is fine for one-off values set by JavaScript or a template, such as a progress bar width or a user-chosen color.

Can you use hover in inline CSS?

No. The style attribute only takes declarations, so pseudo-classes like :hover, pseudo-elements like ::before and @media rules cannot be written there. Put them in a <style> element or a stylesheet.

Related concepts