Inline styles
The style attribute writes inline CSS. The body is a comma-separated list of prop: value pairs, and 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: one declaration in the brackets. The renderer normalises whitespace and drops it into the style attribute. Use this when you only have one inline tweak — anything more, switch to the multi-pair form below.
<p style[font-size: 1.4rem]> Larger text Larger text
Multiple pairs — top-level commas separate
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 — 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
Historically the style attribute was aliased to class; that shifted with the inline-CSS landing. The class shorthand is now Class with a capital C. Use whichever reads best — direct classbtn primary still works for the literal-string form.
<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 so trivial it doesn't earn a selector. For anything reusable, write a selector-form style block — the rules cascade properly, the styles compress, and the markup stays clean.
Next: head back to the docs index for the rest of the library.