Inline styles vs. style sheets

Style information for an element in UI Toolkit can come from three different places:

• C# inline style properties set directly in C# scripts. These properties override any properties from another source that have the same name.
• UXML inline style properties on the element itself, stored directly inside UXML, using the special style attribute. These properties override any same property coming from style sheets.
• StyleSheet style properties coming from a StyleSheet (.uss) asset and applied to an element because the element matches a USS Selector (which is like a search query).

Similar to CSS, style sheets allow sharing of styles across UI elements, UI panels, and screens. They also allow quick refactoring and changing of styles across an entire application from a central location, like themes. It’s encouraged to keep styling in style sheets as much as possible, instead of styles on each individual element.

In UI Builder, you can start by creating elements and using inline styles only to experiment while the number of elements is still small. As you build more complex UI, it’s easier to manage styles using style sheets. You can use the Extract Inline Styles to New Class in the StyleSheet section of the Inspector to extract inline styles on an element to a StyleSheet.

Style sheets also have features that aren’t possible to use with inline styles, like:

• Pseudo states like :hover, which will apply some style properties to an element when you hover over it with the mouse.
• Styling of elements inside a read-only hierarchy inside a Template Instance (instance of another UI Document (UXML)) or custom C# element that creates an internal hierarchy. You can style elements with style sheets using hierarchical USS Selectors, like the following:

   .parentElement > .childElement

For more information on style sheets, see Unity style sheets.