Applying Classes

Elements in Oxygen aren't styled one at a time. You apply a class to an element, and
then you style the class — every style control writes to the class rather than to the
element you happen to have selected.

Style elements with classes

The class is global. Apply card to fifty cards and they share one set of styles: change
the padding once and all fifty change. That's what keeps a site consistent as it grows,
and it's why an Oxygen page is a handful of classes rather than hundreds of individually
tuned boxes.

A class is an ordinary CSS class, and Oxygen treats it as exactly that. The ones you create
here are the same objects listed in
Selectors, and the controls you style them
with are documented in
Selector Properties. This
article is the element side: getting classes onto an element and off it again.

Applying classes

The class field sits directly under the element's name at the top of the properties panel,
and shows the classes on the selected element as chips.

The monitor icon on the left is the breakpoint you're editing at; the chevron on the right
opens the list of every class on the site. Clicking a chip makes it the one your style
changes are written to.

Adding a class

Click the field and either pick an existing class from the list or type a new name and
press Enter — Oxygen creates it and applies it in one step. Type several names
separated by spaces to apply several at once.

At the top of the list, before your existing classes, Oxygen offers a ready-made name based
on the element type — Create container-4 on a fresh Container, using the next number
that isn't taken anywhere on the site. It's there so you never have to invent a name just
to get started.

You don't have to create a class first, either. Change any style while the element has no
class and Oxygen creates that suggested one for you, so the value has somewhere to live.

Removing a class

Remove, in the menu behind the arrow on a chip, takes the class off this element only.
The class itself and every other element using it are untouched.

That's different from Delete in the same menu, which deletes the class from the whole
site and strips it from every element that had it. Remove is the one you want when this
element simply shouldn't carry the class any more.

Everything else in that menu — renaming, duplicating, locking, deleting, and creating
states and nested selectors — acts on the class itself rather than on this element, and is
covered in Selectors.

Conditional classes

A class doesn't have to apply unconditionally. Set condition in the chip's menu shows
or hides the class on this element based on conditions — the same condition system used
everywhere else in Oxygen — so an element can carry a class only for logged-in visitors,
only on a particular post type, or only when a field has a value.

A chip with a condition gets a condition icon, and its menu gains an In-builder Preview
toggle so you can see the element with the class applied and without it while you design.

The condition belongs to this element, not to the class. Every other element using the same
class is unaffected.