The style panel

The Style tab (S) edits CSS. Not a parallel styling system, and never inline styles. The declarations it writes go into a stylesheet or a <style> block you choose, in a form you would have written yourself.

Sections

Properties are grouped and ordered the same way every time, whatever order they appear in the file:

Section	Holds
Flex/Grid Child	flex, grid-column, grid-row, align-self, order — what the parent imposes
Layout	display, flex and grid containers, gap, templates
Spacing	margin and padding, edited as a box
Size	width, height, min/max, box-sizing, overflow, aspect-ratio, object fit
Position	position, top/right/bottom/left, z-index, float, clear
Typography	Font, size, line height, spacing, colour, alignment, decoration
Backgrounds	Colours, gradients, images, as layers
Borders	Width, style, colour, radius per corner
Effects	Opacity, shadows, filters, transforms, transitions, clip paths
Other properties	Anything else, kept in source order

All ten render whether they hold anything or not, and shift-clicking a section heading collapses or expands all of them.

A property with no control of its own lands in Other properties even when it belongs to a section by rights: grid-area, inset, outline, the border-top-style edge shorthands, and margin/padding written as shorthands all appear there rather than in the section above. Grouping is render-only — it never reorders the declarations in your file.

The spacing box

Drag a padding or margin value to change it, or click it to type one — a few pixels of travel are what separate the two. Shift while dragging changes all four sides, ⌥ changes the side and its opposite, and ⌥-clicking a value removes it.

Number fields elsewhere behave the same way: drag the label, or use ↑/↓, with Shift for steps of 10 and ⌥ for 0.1 — except in rem, where the fine step is a sixteenth, so it still nudges by a pixel.

Where the CSS goes

The Add custom styles in: control, under the selector input, picks the source an edit is written to. It lists:

• every .css, .scss, .sass and .less file under src, public or styles
• every .astro file under src carrying a <style is:global> block, because Astro leaves those rules unhashed and they reach the whole page
• each <style> block of the page or component you have open, labelled <style is:global> or <style>

Pick the one that owns this concern. A design-token change belongs in the stylesheet that holds tokens; a one-off belongs in the component.

Values can be variables

Any field that takes a length, a number or a colour accepts a var(); the keyword and segmented controls do not. A referenced variable shows as a purple chip you can click to swap or type around, and the colour box opens the same picker the Variables panel uses. Values resolve through the chain, so you see the colour, not the name of a name.