How to do it…

Let's get started by learning how to create a new project and get ourselves familiar with the Qt Designer:

1. Open up Qt Creator and create a new project. If this is the first time you have used Qt Creator, you can either click the big button, which reads + New Project, or simply go to File | New File or Project.
2. Select Application under the Projects window, and select Qt Widgets Application.
3. Click the Choose... button at the bottom. A window will pop out and ask you to insert the project name and its location.
4. Click Next several times, and click the Finish button to create the project. We will stick with the default settings for now. Once the project has been created, the first thing you will see is the panel with tons of big icons on the left side of the window, which is called the mode selector panel; we will discuss this more later in the How it works... section.
5. You will see all your source files listed on the sidebar panel which is located next to the mode selector panel. This is where you can select which file you want to edit, which in this case is mainwindow.ui, because we are about to start designing the program's UI.

1. Double-click the mainwindow.ui file, and you will see an entirely different interface appear out of nowhere. Qt Creator actually helped you to switch from the script editor to the UI editor (Qt Designer) because it detected the .ui extension on the file you're trying to open.
2. You will also notice that the highlighted button on the mode selector panel has changed from the Edit button to the Design button. You can switch back to the script editor or change to any other tools by clicking one of the buttons located in the upper half of the mode selector panel.
3. Let's go back to the Qt Designer and look at the mainwindow.ui file. This is basically the main window of our program (as the filename implies) and it's empty by default, without any widget on it. You can try to compile and run the program by pressing the Run button (the green arrow button) at the bottom of the mode selector panel, and you will see an empty window pop up once the compilation is complete.
4. Let's add a push button to our program's UI by clicking on the Push Button item in the Widget Box (under the Buttons category) and dragging it to your main window in the form editor. Keep the push button selected, and now you will see all the properties of this button inside the Property Editor on the right side of your window. Scroll down to the middle and look for a property called styleSheet. This is where you apply styles to your widget, which may or may not inherit to its children or grandchildren recursively, depending on how you set your style sheet. Alternatively, you can right-click on any widget in your UI at the form editor and select Change styleSheet... from the pop-up menu.
5. You can click on the input field of the styleSheet property to directly write the style sheet code, or click on the … button beside the input field to open up the Edit Style Sheet window, which has a bigger space for writing longer code for style sheets. At the top of the window, you can find several buttons, such as Add Resource, Add Gradient, Add Color, and Add Font, that can help you to kickstart your coding if you can't remember the properties' names. Let's try to do some simple styling with the Edit Style Sheet window.
6. Click Add Color and choose a color.
7. Pick a random color from the color picker window; let's say, a pure red color. Then click OK.
8. A line of code has been added to the text field on the Edit Style Sheet window, which in my case is as follows:

color: rgb(255, 0, 0);

1. Click the OK button and the text on your push button should have changed to red.