Important: Please read the Qt Code of Conduct -

What is difference bwteen UI and QSS file

  • Hi,

    I create a new GUI project in Qt Creator and find it will create a .ui file under

    the project folder. I open the .ui file and find it is a xml file describing the

    layout and contents of the Windows. Then I am curious since QSS file is also used

    to describe the look & feel of the controls, what is the difference between the




  • You can have a look at "this": documentation that expains alot about .ui files, Other than that QSS is simply Qt Style Sheets its the same CSS.

    Check "Qt Style Sheets Examples":

  • You've already answered your own question.

    The .ui file describes the layout and content of the windows, so the widgets, their properties and their arrangement in layouts, the shortcuts, menu items, actions and the signal and slot connections between those elements.

    The .ui file is used by uic, the user interface compiler, to generate C++ code, above all the setupUi() method, which is responsible for creating the neccessary objects, setting their properties and wiring those up.

    The .qss file on the other hand is used to describe the look and feel of specific widgets, so their color, font families and sizes, margins and paddings and other visual properties.

    Although both are usually used in common, they are not neccessarly tied together. One can be used without the other, a .qss can be set for either a single widget, a whole .ui (which is in technical terms nothing more than a widget) or the whole application and thus each and every .ui.

  • Lukas is right. Noteworthy is also that you can set the QSS also from inside the .ui file. You should understand that there is a difference between the CSS you use for HTML and the QSS styling you can do with Qt. CSS allows for a lot of layout-like tasks. QSS not so much. QSS is more at the level of styling individual widgets (or large numbers of them in one go), but does not describe their relative placement.

Log in to reply