UI entities are implemented using HTML and/or C#. Entities can be styled using SCSS, a preprocessor scripting language that is interpreted/compiled into Cascading Style Sheets (CSS). This is done out of the box.
For static entities without any dynamic component (static banner, simple non-changing crosshair, etc.) HTML UI might be sufficient.
You can still reference C# classes within the HTML using regular HTML-Tags. The referenced C# classes can still react dynamically to the game loop.
For more complex scenarios (e.g. HUD's) a UI implementation using C# is recommended (and probably the only good solution).
UI components can be implemented using the abstract class
Panel. This abstract class has a method
override void Tick() so you can access the game loop.
UI components can either be mounted directly or through other UI Components using
RootPanel.AddChild<E>();. Usually done in the constructor of the class.
To add (S)CSS to the components, simply use
RootPanel.StyleSheet.Load( "/ui/PATH_TO_SCSS.scss" ); in the constructor.
Down below you can see an example from the sandbox gamemode.
SandboxHud implements the
HudEntity<RootPanel> class and loads a stylesheet and all other UI components.
Health class implements
Panel and adds a bunch of stuff to the UI within its constructor.
It also has access to the local player's health within the
Tick-override, so the UI can be updated accordingly.
Source: sandbox - SandboxHud.cs
Source: sandbox - Health.cs
If a panel is not behaving as expected you can troubleshoot it using the Panel Inspector. First, in the S&box editor, make sure the Panel Inspector is enabled by ticking View->Panels.
If you run the game in the editor you will then be able to inspect panels in real-time.