Styling elements in the website builder

Select any element on the canvas and the right-hand Style tab shows every CSS control, grouped the way CSS itself is organised.

What am I styling?

The Style selector at the top is the most important thing on the panel. With no class, your changes apply to that one element. Add a class and they apply to every element sharing it — which is how you keep a site consistent. The line underneath always spells out where your next change will land, so you never have to guess.

If an element has more than one class, click a class chip to include or leave it out of the rule you're editing. With just button lit up you're styling every button; light up button and is-large together and you're styling only the elements that have both. The State dropdown beside it (Hover, Pressed, Focus, Visited) styles the element only in that state.

The coloured dot beside each label

Every property has a small dot that tells you where its value came from:

• Blue — set here, on this breakpoint and state.
• Orange — inherited from a wider breakpoint or a parent rule.
• Hollow — not set; the browser default applies.

Click a dot to remove that property entirely. This is how you undo a change rather than typing a value back in. Elements you drag in often arrive with some styling already applied — that's deliberate, and it shows up here like anything else, so you can adjust or clear it.

Breakpoints cascade downward

Solstral uses the standard breakpoints — Desktop, then 991px, 767px and 479px and below. Styles flow down: set something on Desktop and every smaller size inherits it, then override only what needs to differ. The label down the left of the canvas always tells you which resolutions your current edits affect. Always build Desktop first.

Sizing the canvas

Drag either edge of the page to any width — it snaps to the real breakpoints, and crossing one switches the breakpoint you're editing. Double-click an edge to reset, or click a breakpoint button in the top bar to return it to its natural width. Desktop fills all the available space.

Entering values

Every numeric field takes a value three ways: click and type it (Enter to apply, Esc to cancel), press ↑/↓ to nudge — hold Shift for bigger steps — or press and drag sideways to scrub. Sliders like opacity and blur have an editable number beside them, so you can always land on an exact figure.

Sections

• Layout — display, and for flex containers a nine-point alignment picker plus gap. Choose Grid and you simply type how many Columns and Rows you want — no CSS track syntax to learn. Changing the count keeps any sizes you'd already set.
• Spacing — a visual box: click a number to type a value, or drag it to scrub — Alt for both sides, Shift for all four.
• Size — width/height with min and max, overflow, and under "More size options" an aspect-ratio picker (Square, Widescreen, Portrait…) and a Crop from grid that says which part of an image to keep when it's cropped.
• Position — static, relative, absolute, fixed or sticky, with offsets and z-index. Offsets stay disabled until you pick something other than Static, because CSS ignores them on static elements.
• Typography — six everyday controls, with letter spacing, columns, breaking, wrapping and text shadow behind "More type options".
• Backgrounds — stack image and gradient layers over a background colour; reorder them, and the top of the list paints on top. There's also a Video field: paste or pick a video and it plays, muted and looping, behind that element's content. (It's added as a real video element, because CSS backgrounds can't hold video — add a dark gradient layer over it to keep text readable.) If you'd rather start from a ready-made one, there's a Video background section under Media.
• Borders — all sides at once, or per-side and per-corner.
• Effects — opacity, blend mode, box shadows, transforms, transitions, filters and backdrop filters.
• Custom properties — any CSS the panel doesn't cover, including variables.