A Unity Style Sheet (USS) is a text file recognized as an asset that supports style rules. The USS text file must have the .uss
extension.
A USS consists of the following:
VisualElement
class. You can style the look, define the behaviour, and display it on screen as part of the UI. More infoThe following is the general syntax of a style rule:
selector {
property1: value;
property2: value;
}
When you define a style sheet, you can apply it to a visual treeAn object graph, made of lightweight nodes, that holds all the elements in a window or panel. It defines every UI you build with the UI Toolkit.
See in Glossary. Selectors match against elements to resolve which properties apply from the USS file. If a selector matches an element, the style declarations apply to the element.
For example, the following rule matches any Button
object:
Button {
width: 200px;
}
USS supports several types of simple and complex selectors that match elements based on different criteria, such as the following:
name
propertyUSS also supports pseudo classes that you can use with selectors to target elements that are in a specific state or select the :root
element.
If an element matches more than one selector, USS applies the styles from whichever selector takes precedence.
USS supports a set of simple selectors that are analogous, but not identical, to simple selectors in CSS. The following table provides a quick reference of USS simple selectors.
Selector type | Syntax | Matches |
---|---|---|
Type selector | Type {...} |
Elements of a specific C# or visual element type. |
Class selector | .class {...} |
Elements with an assigned USS class. |
Name selector | #name {..} |
Elements with an assigned name attribute. |
Universal selector | * {...} |
Any elements. |
USS supports a subset of CSS complex selectors. The following table provides a quick reference of USS complex selectors.
Selector type | Syntax | Matches |
---|---|---|
Descendant selector | selector1 selector2 {...} |
Elements that are the descendant of another element in the visual tree. |
Child selector | selector1 > selector2 {...} |
Elements that are the children of another element in the visual tree. |
Multiple selector | selector1selector2 {...} |
Elements that match all the simple selectors. |