Inline styles
The style attribute writes inline CSS. The body is a comma-separated list of prop: value pairs. The renderer joins them into a standard style="prop: value; prop: value" attribute. Commas inside parens (rgb(...), var(--name, fallback)) and string literals are not split, so functional notation works naturally. For the class attribute, use Class with a capital C: the lowercase class shorthand is reserved for style.
Single pair
No commas: value passes through trimmed
The simplest form is one declaration in the brackets. The renderer normalises whitespace and drops it into the style attribute. Use this for a single inline tweak. For anything more, switch to the multi-pair form below.
<p style[font-size: 1.4rem]> Larger text Larger text
Multiple pairs
Renders as: width: 50px; height: 50px
Top-level commas separate CSS declarations. The renderer joins pairs with the standard CSS separator in output.
<div style[width: 80px, height: 80px, background: steelblue]> A coloured square Functional CSS
Commas inside parens are preserved
Only top-level commas split the list. Commas inside rgb, var, calc, and any other functional notation stay put. You can mix functional values with plain pairs in the same attribute.
<p style[color: rgb(220, 50, 50), background: var(--surface, gainsboro), padding: 1rem]> tinted line tinted line
Interpolation in values
Bracket reads resolve at SSR and re-emit reactively on state change
Bracket interpolation works inside style the same way it works elsewhere. Each is evaluated against the current scope at render time for the initial paint, and the renderer stashes a per-attribute config so any later << write to a referenced state name re-runs the expression and re-applies the attribute. Drag the slider, and the background hue follows live.
> page
hue: 200
<input type[range] min[0] max[360] on_input[hue << event.target.value]>
<p style[background: hsl([hue], 70%, 50%), padding: 1rem]> hue follows the slider hue follows the slider
style vs Class
Capital C for the class attribute
The style attribute used to be an alias for class. It now writes inline CSS, so the class shorthand is Class with a capital C. Use whichever reads best. The direct classbtn primary form still works for literal strings.
<button Class[btn primary] style[margin-top: 0.5rem]> Save When to use inline vs a style block
Inline for dynamic values; selector blocks for everything reusable
Reach for inline style when the value depends on page state (animations, progress bars, charts), or when the styling is too trivial to earn a selector. For anything reusable, write a selector-form style block. The rules cascade properly, the styles compress, and the markup stays clean.
See also Style blocks · CSS variables · Reactivity