Styling with USS

Styling with USS

USS (Unity Style Sheets) is the styling language for UI Toolkit, working exactly like CSS in web design.

Separation of Concerns

• UXML defines the elements (e.g. "I have a button").
• USS defines the style (e.g. "The button has a rounded border, green color, and 20px padding").

Using USS allows you to change the visual theme of your entire game by simply swapping a stylesheet, without rebuilding the layout.

Flexbox Layout Model

USS layouts are powered by Flexbox:

• Elements are arranged automatically in a Row or Column layout.
• Use Align Items and Justify Content to align and distribute space between elements.
• This responsive design ensures the UI scales naturally to fit different screen sizes, without manual anchoring.

CSS-like Rules

USS files support class selectors:

• Define a class named .menu-button in your USS file.
• Assign the class name "menu-button" to buttons in your UXML.
• Change properties (margin, padding, background-color, border-radius) in the stylesheet to update all linked buttons instantly.
• Supports pseudo-classes like :hover and :active to add hover and click state styling without code.

TL;DR

• USS styles UI Toolkit elements, separating layout from visual styling.
• Flexbox makes UI layouts responsive and adaptable.
• Define styles in classes to apply them to multiple elements.
• Use pseudo-classes like :hover for visual mouse-over feedback.