References

Beginner-friendly references for web development, with live, editable examples.

The HTML style global attribute

Global attribute Works on every element All modern browsers Updated
Quick answer

The HTML style attribute applies inline CSS directly to one element, e.g. <p style="color:red">. It is a global attribute. Inline styles have very high specificity and override stylesheet rules, so prefer external CSS and reserve style for one-off or JavaScript-set values.

Overview

The style attribute holds one or more CSS declarations that apply to a single element. Each declaration is a property: value pair, and multiple declarations are separated by semicolons.

Inline styles sit at the top of the cascade: they beat element, class and id selectors, and only an !important rule (or an inline !important) can override them. That power is also their weakness: inline styles cannot be reused, cached, or use media queries and pseudo-classes, and they make markup harder to maintain. Reach for an external or internal stylesheet for anything beyond a one-off, and use the style attribute mainly for values your JavaScript sets at runtime.

Syntax

<p style="color: #b91c1c; font-weight: 700;">Important text</p>

Values

Value
One or more CSS declarations (property: value;) separated by semicolons.

Example

Live example 
<p style="color:#b91c1c; font-weight:700; padding:8px 12px; background:#fef2f2; border-radius:6px;">This paragraph is styled inline.</p>

Best practices

  • Prefer external or internal CSS with a class for anything reusable. Keep presentation in your stylesheet.
  • Use the style attribute mainly for values set dynamically by JavaScript.
  • Remember inline styles win the cascade; debugging an "unstyleable" element often means an inline style is overriding your CSS.
  • A strict Content-Security-Policy can block inline styles. Rely on stylesheets for production apps.

Accessibility

Never use style to convey meaning by appearance alone, for example color to indicate an error. Information shown only through styling is invisible to screen-reader users and to anyone who overrides your colors, so always pair it with text or an appropriate ARIA attribute.

Frequently asked questions

What is the HTML style attribute?
It applies CSS directly to a single element without a separate stylesheet, e.g. style="margin:0;color:#333".
Is an inline style stronger than a CSS class?
Yes. Inline styles have higher specificity than element, class and id selectors. Only an !important declaration can override an inline style.
Why should I avoid inline styles?
They cannot be reused or cached, they bloat your HTML, they cannot use media queries or pseudo-classes, and they are hard to maintain. Use a class and a stylesheet instead.
When is the style attribute a good choice?
For values computed and set by JavaScript at runtime, quick prototyping, or HTML email where external stylesheets are unreliable.
spellcheck tabindex