Selector Properties

Oxygen's style panel is a visual interface for CSS, and very deliberately nothing more.
Every control maps to one CSS property. What you set is what gets written into the
stylesheet — no abstractions on top, no framework classes generated behind your back, no
"Oxygen way" of doing spacing that you have to learn instead of the real thing.

Set Display to Flex and Gap to 24 on a class called card-row, and the site ships:

.card-row{display:flex;gap:24px}

That is the whole model. If you know CSS you already know this panel; if you don't, the
panel is a reasonable way to learn it, because the names are the property names.

Two ways in

• From an element — select it, click the class chip you want to edit, and the style
  sections appear below. This is the common path, and it's covered in
  Applying Classes.
• From the Selectors panel — open it with the {} button in the toolbar and click any
  selector. Same sections, same controls, no element required. Use this to fix a class
  without hunting for something that uses it. See
  Selectors Panel.

The sections

The style controls are grouped into collapsible sections, and the group names are the
CSS areas they cover. Click a title to open it; right-click a title to copy, paste or
clear that whole section on another class.

Two of the sections are conditional: Flex Child appears only when the element's parent
is a flex container, and Grid Child only when the parent is a grid — because those
properties only mean anything there.

Layout

display, and whatever the chosen display makes relevant. Pick Flex and you get Flow,
Align and Gap; pick Grid and you get columns, rows, areas and their alignment. The •••
at the end of the Display row holds the less common values — Inline Block, Inline Flex,
Inline Grid, Inline, Contents.

Visibility (visible / hidden) sits at the bottom of the section. Note that it's not
the same as Display: None — hidden still occupies its space.

Spacing

margin and padding, as the box model rather than eight number fields. Click a side and
type; the preset buttons that appear copy the value to the opposite side or to all four.

Size

width, height, their min and max variants, plus overflow, aspect-ratio,
object-fit, object-position and box-sizing.

Position

position and, once it's set to anything other than static, the top / right /
bottom / left offsets and z-index.

Typography

Colour, family, weight, size, line height, alignment, decoration, transform, letter
spacing, indent and direction. The ••• button at the bottom reveals the rest —
overflow wrap, text wrap, text overflow, list style, text stroke and text shadow.

Fonts come from the site's font list rather than a free-text field, so a font you pick
here is one the site actually loads.

Background

background-color, plus a layer stack for images and gradients — add layers with the
+ and each gets its own size, position, repeat, attachment and blend mode, exactly
like stacked CSS backgrounds.

Borders

Radius — uniform or per corner — and per-side width, style and colour. Pick a side in the
little box diagram, set its three values, and clear removes them again.

Note: A border side is only written to the stylesheet if it has a width. Setting
only a colour produces no CSS. This matters most on states: a &:hover that changes
nothing but the border colour will do nothing until you restate the width on the state
as well.

Effects

Opacity, cursor, blend mode and outline, then the repeaters — Transition, Box Shadow,
Filter, Backdrop Filter and Transform — where each entry is one function or one shadow and
they stack in order. The ••• at the bottom adds transform origin, pointer events and
backface visibility.

Flex Child

How this element behaves inside its flex parent: flex-grow, flex-shrink,
flex-basis, align-self and order.

Grid Child

The same idea for a grid parent: row and column start/end, named area, align-self,
justify-self and order.

Custom CSS

The escape hatch at the bottom of the panel, for the handful of things the controls don't
cover — container queries, @supports, vendor-prefixed oddities, anything brand new.

Write :selector where the selector's own name should go, and Oxygen substitutes it:

The block above ships as:

.demo-card{container-type:inline-size}
@container (max-width:380px){.demo-card .demo-card-title{font-size:18px}}

Custom CSS is written after the selector's generated rule, and it's per-breakpoint like
everything else — CSS typed while you're editing the tablet breakpoint is emitted inside
the tablet media query.

Prefer the controls where a control exists. Not out of purity — a value in a control is
visible, resettable, breakpoint-aware and readable by an agent, while the same value in a
text box is none of those things.

Values are per breakpoint

Every control writes to the breakpoint you're currently editing, chosen in the toolbar.
Desktop is the base: values set there apply at every width, and each smaller breakpoint
overrides what it needs to. In the stylesheet that's a plain media query:

.demo-heading{font-size:34px}
@media (max-width:1023px){.demo-heading{font-size:28px}}

Reading the labels

Control labels are colour-coded, so you can tell at a glance where a value on screen
actually comes from:

• Purple — set explicitly, here, on this selector at this breakpoint.
• Amber — inherited: it comes from a larger breakpoint or from another class on the
  element. The value shows as placeholder text rather than a real value.
• Red — overwritten: you set it, but something later in the cascade wins.
• Blue — bound to a variable.

Hover an amber or red label and Oxygen names the source:

Double-click a label to reset that control, clearing the value at the current
breakpoint and letting whatever was underneath show through again.

Using a variable instead of a value

Any control holding a colour, unit, number, font family or image can be pointed at a
global variable instead of a literal value: hover the control, click the $ toggle at
its top-left corner, and pick one. The control then shows the variable as a chip, the
label turns blue, and the stylesheet gets var(--your-variable) — so changing the
variable restyles everything bound to it.

Only variables whose type fits the control are offered, and you can create one on the spot
from the same chooser. See Variables.

Copy, paste, reset

• Right-click a section title — copy, paste or clear that section between classes.
• Double-click a control label — reset that one control at this breakpoint.
• In the Selectors panel, the ••• in the header expands or collapses every section at
  once.