Skip to main content

Style sheets overview

We will now see a few examples to get started with using xtd style sheets.

CSS usage

Follow the css tutorial to read or write CSS style sheets.

CSS is used to define styles for xtd controls.

xtd css example

The following example shows part of the style sheet of a button control for standard pseudo state :

button {
margin: 0px 1px 0px 1px;
border-style: outset;
border-color: system-color(control-dark);
border-width: 1px;
border-radius: 5px;
background-image: linear-gradient(system-color(button-face), system-color(button-face));
padding: 1px 1px 1px 3px;
color: system-color(control-text);
text-align: middle center;
text-decoration: none;

The following example shows part of the style sheet of a button control for pressed pseudo state :

button:pressed {
background-image: linear-gradient(rgba(255, 255, 255, 93), rgba(255, 255, 255, 93));

It can be noticed that only the properties that differ with the standard pseudo state are expressed. The other properties will be the same as those of the standard preudo state.


we can notice that the property is written like this :

  background-image: linear-gradient(system-color(button-face), system-color(button-face));

when we could have simply written this:

  background-color: system-color(button-face);

The difference between the two cases is that if you change the background color of the button by programming, in the first case, the button is not impacted while in the second case the button will take the color defined by programming. So it's a design choice.

A background color can be replaced on the fly while ab ackground image cannot.

In the case of our example we don't want a change of color to change the appearance of the button because we can imagine that the color of the system button-face is semi-transparent.

Style sheet usage

coming soon...


xtd has predifined themes for major operating system and desktop environment and also some specific themes.

Feel free to browse these themes for inspiration.

Current Operating System / Desktop Environment


Colors only

  • black contains black color theme.
  • blue contains blue color theme.
  • dark contains dark color theme.
  • green contains green color theme.
  • light contains light color theme.
  • red contains red color theme.
  • white contains white color theme.


The style sheet for each control has been split in several files for more clarity. But we could have put them in one file. xtd browses the whole folder and reads all files with the .css extension.

See also