HTML & CSS reference

style

CSS properties right on the element (inline styles).

Syntax

<p style="color: red;">…</p>

Examples

Inline styles:

<p style="color: white; background: teal; padding: 8px;">A note with inline styles.</p>

A CSS variable value for one element:

<style>
  .bar { height: 12px; width: var(--w); background: orange; margin: 4px 0; }
</style>
 
<div class="bar" style="--w: 30%"></div>
<div class="bar" style="--w: 80%"></div>

Notes

Inline styles beat every rule from a stylesheet except !important, and they cannot be reused. Use them for one-off values that are computed or come from data, and keep the rest of the styling in CSS.

In the tutorial

Attributes — How HTML attributes work, the global attributes id, class, title, lang, hidden and style, boolean attributes and data attributes.

Thanks for reading!