If you snoop around TQTXWidget you might notice that we do something interesting, namely that we use the object pascal class name as the default style for that widget. So when the widget is created it will actually add it's own name to it's CSS style collection.


  • TQTXButton will automatically map to .TQTXButton { }
  • TQTXPanel will automatically map to .TQTXPanel { }
  • .. and so on


This simple mechanism makes it very simple to style elements, because there is never any confusion about what name the style has. So if you create a widget that is called TQTXStopWatch, then all you have to do is add a CSS rule with the same name -and the two automatically find each other!


You can isolate your own styles in a separate CSS file and just add it to the HTML header. Alternatively you can inject your CSS at runtime into the global style-sheet (more about that later).

When you are creating and using your own widgets in a project, just add your own stuff to the theme.css file, that's why it's there.