05 — Styling and Button States

Open UI/StarterKit.uss (double-click opens it in your code editor; it's also browsable in UI Builder's StyleSheets panel). It's heavily commented — this lesson explains the ideas behind it.

Selectors: three ways to target elements

.panel { }        /* class selector — matches class="panel" (use this 95% of the time) */
#score-label { }  /* name selector — matches name="score-label" */
Button { }        /* type selector — every Button in the document */

Attach a stylesheet to a UXML document in UI Builder: StyleSheets panel → + → Add Existing USS.

Button states = pseudo-classes

This is the payoff of the whole lesson. A button's visual states are not scripted — they're pure USS:

.btn          { background-color: rgb(58, 64, 80); }
.btn:hover    { background-color: rgb(74, 82, 102); scale: 1.05 1.05; }
.btn:active   { scale: 0.97 0.97; translate: 0 2px; }  /* while pressed */
.btn:focus    { border-color: rgb(86, 156, 214); }     /* keyboard/gamepad focus */
.btn:disabled { opacity: 0.4; }                        /* after SetEnabled(false) */

:hover, :active, :focus, :disabled, :checked (toggles) — Unity applies and removes them automatically as the user interacts. Full list: USS pseudo-classes.

The kit's "Locked" button demonstrates :disabled: one call to SetEnabled(false) in C# and the USS rule takes over.

Transitions: free animation

One property makes state changes glide instead of snap:

.btn {
    transition-property: background-color, scale, translate;
    transition-duration: 0.12s;
}

Any time a transitioned property changes — hover, press, or a class added from C# — it animates. The score "pop" works exactly this way: C# adds .score-pop (scale 1.2) for 150 ms, and the transition animates it both directions.

Variables: one palette, changed in one place

.hud-root {
    --color-accent: rgb(86, 156, 214);
}
.panel-title {
    color: var(--color-accent);
}

Change --color-accent once and every panel title, focus ring, and slider handle updates. This is how you re-theme a whole game in minutes — try turning the kit's blue accent to gold.

Styling built-in controls' innards

Controls like ProgressBar are little trees of sub-elements with predictable USS names. Descend into them with a space:

.health-bar .unity-progress-bar__progress { background-color: rgb(96, 190, 120); }

Find these names with Window → UI Toolkit → Debugger — the UI Toolkit equivalent of the browser's "Inspect Element", and your best friend from now on. Each control's docs also list them (ProgressBar).

Combining classes like LEGO

class="btn btn-danger" layers a color variant over the shared base — the same pattern as Bootstrap/Tailwind on the web. Add your own .btn-ghost or .btn-huge without touching the base.

Exercises

  1. Give .panel a :hover state that brightens its border.
  2. Add a .btn-warning yellow variant and apply it to a new button.
  3. Use the UI Toolkit Debugger to find the Toggle checkmark's element name, and restyle it via :checked.

Next: 06 - Wiring It Up With C Sharp